/* ==========================================================================
   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: 0;
	padding: 6px;
	/* position/top/left are set inline by app.js (position: fixed), computed
	   from the button's own on-screen position — see positionDoctorList().
	   This lives in <body>, not inside .app-sidebar, so its overflow:hidden
	   (needed elsewhere, for the collapse/expand transition) never clips it. */
	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: 15.5px;
	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):not(.day-off-type-chip):not(.btn-icon-square):not(.opening-hours-row) {
	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):not(.day-off-type-chip):not(.btn-icon-square):not(.opening-hours-row):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: 13.5px;
	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: 14.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); }

/* A treatment card's Charge + Status on one line, and the session-level
   Total Charge summary — a distinct light-blue callout so the running
   total reads as its own thing, not just another data row. */
.treatment-charge-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
}
.treatment-charge-row p { margin: 0; }

.session-total-charge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 16px;
	background: #EAF3FC;
	border: 1.5px solid #BEDBF7;
	border-radius: 12px;
}
.session-total-charge .total-charge-label {
	font-size: 13.5px;
	font-weight: 600;
	color: #2E6199;
}
.session-total-charge .total-charge-value {
	font-size: 17px;
	font-weight: 700;
	color: #1B4A78;
}

/* Treatment History entries — a left rail ties each visit to the ones
   before and after it, reading as one continuing thread rather than a
   stack of unrelated cards. */
.treatment-history-card {
	margin-bottom: 8px;
	border-left: 3px solid var(--mint-500);
}
.treatment-history-card:last-child { margin-bottom: 0; }
.treatment-history-card--current {
	background: #EAF3FC;
	border-left-color: #4A90D9;
}
.status-badge--current {
	background: #D6E8FB;
	color: #1B4A78;
	margin-left: 8px;
}

.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;
}

/* Wide-screen variant of Add/Edit Session: Patient/Practitioner/Date/Notes
   on the left, Diagnoses/Treatments on the right — set by JS at open time
   (window width), so the form reads shorter and needs less scrolling once
   there's room for two columns side by side. Diagnoses/Treatments keep
   their usual popup on "+"/click either way — only their position moves. */
.modal-dialog.modal-dialog--split { max-width: 840px; }
.modal-body.modal-body--split {
	flex-direction: row;
	align-items: flex-start;
	gap: 24px;
}
.modal-column-left,
.modal-column-right {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.modal-column-right {
	border-left: 1.5px solid var(--border);
	padding-left: 24px;
}

.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[data-clickable] { cursor: pointer; margin: 0 -4px; padding: 8px 4px; border-radius: 8px; transition: background 0.12s ease; }
.stat-row[data-clickable]:hover { background: var(--mint-100); }
.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;
}

/* One unpaid session per line (name, date, amount side by side) — the
   Outstanding Balance popup's detail list, styled to read like the card's
   own stat-rows rather than stacking each field on its own line. */
.receivables-row {
	display: flex;
	align-items: center;
	gap: 16px;
}
.receivables-row .receivables-name {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.receivables-row .receivables-date {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--ink-soft);
	white-space: nowrap;
}
.receivables-row .receivables-amount {
	flex-shrink: 0;
	min-width: 80px;
	text-align: right;
	font-weight: 700;
	color: var(--mauve-900);
	white-space: nowrap;
}

/* 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 .sticky-note-field {
	margin-bottom: 4px;
}
.sticky-note .sticky-note-field:last-child {
	margin-bottom: 0;
}
.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--appointment {
	background: #EAF3FC;
	border: 1px solid #BEDBF7;
	color: #1B4A78;
	font-weight: 600;
}
.sticky-note--appointment .sticky-note-pin { background: #4A90D9; }
.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; }

/* Doctor day off (Business Settings > Doctors) — whole-day background on
   the calendar. Own opacity instead of FullCalendar's default so the label
   stays readable; diagonal stripes so it reads as "unavailable" at a glance. */
.fc .fc-bg-event.calendar-day-off {
	opacity: 1;
	background-image: repeating-linear-gradient(135deg, var(--day-off-stripe, rgba(201, 116, 138, 0.10)) 0 6px, transparent 6px 14px);
}

.fc .fc-bg-event.calendar-day-off .fc-event-title {
	margin: 4px 6px;
	font-size: 11.5px;
	font-style: normal;
	font-weight: 700;
	color: var(--day-off-text, #A0526A);
	white-space: normal;
}

/* On/off switch row (doctor page > Settings). The whole row is a <label>,
   so clicking anywhere on it toggles the hidden checkbox. label.switch-row
   (not .switch-row) so it outranks the generic .settings-card label rule. */
label.switch-row {
	margin: 0;
	font-weight: 400;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	background: #ffffff;
	cursor: pointer;
}
label.switch-row.disabled { cursor: default; opacity: 0.7; }
.switch-row .switch-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.switch-row .switch-text strong { font-size: 13.5px; color: var(--mauve-900); }
.switch-row .switch-text small { font-size: 12.5px; color: var(--ink-soft); }
.switch-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-row .switch-track {
	position: relative;
	display: block;
	flex: none;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #D9D1CC;
	transition: background 0.15s ease;
}
.switch-row .switch-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(74, 51, 58, 0.25);
	transition: transform 0.15s ease;
}
.switch-row input:checked + .switch-track { background: linear-gradient(135deg, var(--mint-600), var(--rose-600)); }
.switch-row input:checked + .switch-track::after { transform: translateX(20px); }
.switch-row input:focus-visible + .switch-track { outline: 2px solid var(--mint-500); outline-offset: 2px; }

/* Compact variant: inline "label + switch" inside a list row (doctor page >
   Appointment categories). */
label.switch-row.switch-row--compact {
	padding: 0;
	border: none;
	background: transparent;
	gap: 8px;
	flex: none;
}
label.switch-row.switch-row--compact .switch-text {
	flex: none;
	font-size: 12.5px;
	color: var(--ink-soft);
}

/* Small minutes field inside a list row (doctor page > Appointment
   categories). The placeholder shows the category default. */
input.duration-input {
	width: 76px;
	padding: 6px 8px;
	border: 1.5px solid var(--border);
	border-radius: 9px;
	background: #FBFAF8;
	font-size: 13px;
	text-align: right;
	color: var(--mauve-900);
	margin: 0;
}
input.duration-input::placeholder { color: #B9AEB1; }
input.duration-input:focus { outline: none; border-color: var(--mint-500); background: #FFFFFF; }

/* Day-off type: tag in lists, chips in the add form (js/day_off_types.js
   sets each type's colour). Chips are <button>s inside .settings-card, so
   the selectors are specific enough to beat its generic button rule. */
.day-off-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 4px 9px 4px 7px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.day-off-tag svg { width: 15px; height: 15px; flex: none; }
.day-off-type-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.day-off-type-picker button.day-off-type-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 12px 7px 10px;
	border: 1.5px solid var(--border);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--mauve-900);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: none;
	transform: none;
}
.day-off-type-picker button.day-off-type-chip svg { width: 17px; height: 17px; flex: none; color: var(--type-color); }
.day-off-type-picker button.day-off-type-chip:hover { border-color: var(--type-color); }
.day-off-type-picker button.day-off-type-chip.selected {
	border-color: var(--type-color);
	box-shadow: inset 0 0 0 1px var(--type-color);
	font-weight: 700;
}

/* Day-off type colours on the calendar (codes from js/day_off_types.js). */
.fc .fc-bg-event.day-off-sick_leave { --day-off-stripe: rgba(79, 107, 237, 0.12); --day-off-text: #3B55C9; }
.fc .fc-bg-event.day-off-annual_leave { --day-off-stripe: rgba(124, 107, 232, 0.12); --day-off-text: #5E4FC4; }
.fc .fc-bg-event.day-off-unpaid_leave { --day-off-stripe: rgba(232, 162, 58, 0.12); --day-off-text: #B87414; }
.fc .fc-bg-event.day-off-missed_shift { --day-off-stripe: rgba(229, 83, 75, 0.12); --day-off-text: #C0392F; }
.fc .fc-bg-event.day-off-paid_leave { --day-off-stripe: rgba(232, 162, 58, 0.12); --day-off-text: #B87414; }

/* Doctor page > Work schedule: month grid, Monday first. */
.schedule-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}
.schedule-grid-head {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-soft);
	text-transform: capitalize;
	padding-bottom: 2px;
}
.schedule-cell {
	min-height: 78px;
	padding: 6px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.schedule-cell--blank { border: none; background: transparent; }
.schedule-cell.weekend { background: #FBFAF8; }
.schedule-cell.editable { cursor: pointer; transition: border-color 0.15s ease; }
.schedule-cell.editable:hover { border-color: var(--mint-500); }
.schedule-cell.today { border-color: #E8C547; box-shadow: inset 0 0 0 1px #E8C547; }
.schedule-cell-number { font-size: 12px; font-weight: 700; color: var(--mauve-900); }
.schedule-tile {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 5px 6px;
	border-radius: 7px;
	background: #DFF3D9;
	color: #2F7A3A;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.25;
}
.schedule-tile small { font-weight: 500; font-size: 10.5px; opacity: 0.85; }
.schedule-cell .day-off-tag.schedule-cell-off { padding: 2px 6px 2px 4px; font-size: 10.5px; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.schedule-cell .day-off-tag.schedule-cell-off svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
	.schedule-grid { gap: 3px; }
	.schedule-cell { min-height: 60px; padding: 4px; }
	.schedule-tile small, .schedule-cell .day-off-tag span { display: none; }
}

/* Calendar: doctor's working hours (light yellow) and breaks (doctor page >
   Work schedule). Own opacity so the break label stays readable. */
.fc .fc-bg-event.calendar-work-hours { opacity: 1; }
.fc .fc-bg-event.calendar-break {
	opacity: 1;
	background-image: repeating-linear-gradient(135deg, rgba(110, 78, 86, 0.09) 0 5px, transparent 5px 11px);
}
.fc .fc-bg-event.calendar-break .fc-event-title {
	margin: 2px 6px;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	color: #6E4E56;
}

/* Side panel (doctor page > Work schedule > Create schedule): slides in from
   the right over the usual .modal-overlay. */
.side-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 100%);
	z-index: 1101;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	box-shadow: -12px 0 32px rgba(74, 51, 58, 0.18);
	animation: side-panel-in 0.18s ease-out;
}
.side-panel .modal-body { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px; }
.side-panel .side-panel-footer { flex-direction: column; align-items: stretch; gap: 10px; }
@keyframes side-panel-in { from { transform: translateX(24px); } to { transform: none; } }

.weekday-picker { display: flex; flex-wrap: nowrap; gap: 5px; }
.weekday-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 1 1 0;
	min-width: 0;
	padding: 6px 2px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: var(--mauve-900);
	text-transform: capitalize;
}
.weekday-option:has(input:checked) { border-color: var(--mint-500); background: var(--mint-100); }
.weekday-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--mint-600); }

.bulk-preview { font-size: 13px; color: var(--mauve-900); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.bulk-preview small { font-weight: 400; color: var(--ink-soft); }

/* Work schedule: picked days (multi-select) and the side panel next to the
   page. On wide screens the page makes room for the panel so the grid stays
   clickable while it is open. */
.schedule-cell.selected {
	border: 2px dashed var(--mint-600);
	background: var(--mint-100);
	box-shadow: none;
}
.picked-days { display: flex; flex-wrap: wrap; gap: 6px; }
.picked-day {
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--mint-100);
	color: var(--mauve-900);
	font-size: 12px;
	font-weight: 600;
	text-transform: capitalize;
}
/* Room for the side panel comes from the page content, not <body> padding:
   SweetAlert2 measures and later restores body padding, which would pin it. */
@media (min-width: 1100px) {
	body.has-side-panel .app-content { margin-right: 440px; transition: margin-right 0.15s ease; }
}

/* In the side panel the footer is a column (preview above the button), so
   the shared ".modal-footer .btn-* { flex: 1 }" would squash the button's
   height instead of sharing width. Buttons in a row inside it keep flex: 1. */
.side-panel .side-panel-footer > .btn-primary,
.side-panel .side-panel-footer > .btn-secondary,
.side-panel .side-panel-footer > .btn-danger { flex: none; }

/* Work schedule side panels: "Schedule type" dropdown with icons. */
.day-type-select { position: relative; }
.day-type-button,
.day-type-option {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	border: none;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--mauve-900);
	text-align: left;
	cursor: pointer;
}
.day-type-button {
	padding: 10px 12px;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	background: #FBFAF8;
}
.day-type-button:hover, .day-type-select:focus-within .day-type-button { border-color: var(--mint-500); }
.day-type-icon { display: inline-flex; flex: none; width: 20px; height: 20px; }
.day-type-icon svg { width: 20px; height: 20px; }
.day-type-chevron { margin-left: auto; display: inline-flex; width: 16px; height: 16px; color: var(--ink-soft); }
.day-type-list {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 5;
	padding: 6px;
	background: #FFFFFF;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(74, 51, 58, 0.16);
}
.day-type-list.open { display: block; }
.day-type-option { padding: 9px 10px; border-radius: 8px; }
.day-type-option:hover { background: var(--mint-100); }
.day-type-option.selected { background: #F4F1EF; font-weight: 600; }
.day-type-check { margin-left: auto; color: var(--mauve-900); }

/* Online booking hours: light blue on the calendar and in the schedule grid. */
.fc .fc-bg-event.calendar-online { opacity: 1; }
.fc .fc-bg-event.calendar-online .fc-event-title {
	margin: 2px 6px;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	color: #2F7DB5;
}
.schedule-tile small.schedule-tile-online {
	align-self: flex-start;
	margin-top: 1px;
	padding: 1px 5px;
	border-radius: 5px;
	background: rgba(110, 185, 235, 0.25);
	color: #2F7DB5;
	font-weight: 700;
	opacity: 1;
}

/* A .modal-dialog opened as a side panel (calendar > edit appointment):
   docked right, full height, no overlay, page content stays usable. */
.modal-dialog.side-panel-dialog {
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	transform: none;
	width: min(440px, 100%);
	max-width: none;
	max-height: none;
	border-radius: 0;
	z-index: 1101;
	box-shadow: -12px 0 32px rgba(74, 51, 58, 0.18);
	animation: side-panel-in 0.18s ease-out;
}
.modal-dialog.side-panel-dialog .modal-body { flex: 1; overflow-y: auto; }

/* The appointment open in the side panel: the only one that can be moved. */
.fc .fc-timegrid-event.calendar-editing {
	box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--mint-600), 0 8px 18px rgba(74, 51, 58, 0.25);
	z-index: 5;
}

/* Date/time fields briefly highlighted when a calendar drag changes them. */
@keyframes field-updated { from { background: var(--mint-100); border-color: var(--mint-500); } to { background: #FBFAF8; } }
input.just-updated { animation: field-updated 1.2s ease-out; }

/* ---------- Business Settings > Online Booking ---------- */

.booking-address-row {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--border);
	border-radius: 11px;
	overflow: hidden;
	background: #FBFAF8;
}
.booking-address-prefix {
	display: flex;
	align-items: center;
	padding: 0 10px 0 12px;
	font-size: 14px;
	color: var(--ink-soft);
	background: var(--mint-100);
	border-right: 1px solid var(--border);
	white-space: nowrap;
}
.settings-card .booking-address-row input {
	flex: 1;
	min-width: 0;
	border: none;
	border-radius: 0;
	margin: 0;
	background: transparent;
}
.settings-card .booking-address-row input.invalid { color: var(--rose-600); }
.booking-link-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	margin: 6px 0 14px;
	border-radius: 12px;
	background: var(--mint-100);
	border: 1px solid var(--mint-300);
}
.booking-link-box.off { background: #F6F2F3; border-color: var(--border); }
.booking-link-box.off a { color: var(--ink-soft); }
.booking-link-box a { font-weight: 600; color: var(--mint-700); word-break: break-all; text-decoration: none; }
.booking-link-box a:hover { text-decoration: underline; }
.booking-link-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.booking-link-actions .btn-secondary { flex: none; }
.booking-doctors-note {
	font-size: 13px;
	line-height: 1.5;
	padding: 10px 12px;
	border-radius: 10px;
	background: #F8F5F6;
	color: var(--ink);
}
.booking-doctors-note.warn { background: var(--rose-100); color: var(--mauve-700); }

/* ---------- Online bookings (calendar badge + appointment card) ---------- */

.calendar-online-badge {
	display: inline-block;
	vertical-align: 1px;
	margin: 0 5px 0 0;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mint-700);
	font-size: 9px;
	font-weight: 700;
	line-height: 13px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.fc .fc-daygrid-event .calendar-online-badge { margin: 0 4px 0 0; }
.online-booking-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--mint-100);
	border: 1px solid var(--mint-300);
	color: var(--mint-700);
	font-size: 12px;
	font-weight: 600;
}
.appointment-online-info small { color: var(--ink-soft); margin-left: 6px; }

/* New appointment being filled in (Add Appointment side panel): drawn on the
   calendar in its category color, dashed and gently pulsing until saved. */
@keyframes calendar-draft-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(95, 182, 172, 0.45), 0 4px 14px rgba(74, 51, 58, 0.18); }
	50% { box-shadow: 0 0 0 5px rgba(95, 182, 172, 0), 0 4px 14px rgba(74, 51, 58, 0.18); }
}
.fc .fc-timegrid-event.calendar-draft,
.fc .fc-daygrid-event.calendar-draft {
	outline: 2px dashed rgba(255, 255, 255, 0.95);
	outline-offset: -4px;
	animation: calendar-draft-pulse 1.8s ease-in-out infinite;
	z-index: 5;
	cursor: grab;
}
.fc .fc-timegrid-event.calendar-draft .fc-event-title { font-weight: 700; }

/* ---------- Doctor > Days Off: year filter, totals, periods ---------- */

.days-off-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.days-off-toolbar .btn-primary { flex: none; }
label.days-off-year-field { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.days-off-year {
	padding: 8px 30px 8px 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--ink);
	background: #FBFAF8;
	border: 1px solid var(--border);
	border-radius: 10px;
	cursor: pointer;
}
.days-off-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.days-off-summary-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 4px;
	border-radius: 999px;
	background: #F8F5F6;
	font-size: 12.5px;
}
.days-off-row.editable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.days-off-row.editable:hover { border-color: var(--mint-500); box-shadow: 0 2px 10px rgba(74, 51, 58, 0.06); }
.days-off-row.past { opacity: 0.6; }
.days-off-row.past:hover { opacity: 0.85; }
.days-off-now {
	display: inline-block;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--rose-100);
	color: var(--rose-600);
	font-size: 11px;
	font-weight: 700;
}

/* Side panel footer with a secondary action (e.g. Delete) next to Save. */
.side-panel-actions { display: flex; gap: 10px; }
.side-panel-actions > .btn-primary { flex: 1; }
.side-panel-footer .side-panel-actions > button { flex: none; }
.side-panel-footer .side-panel-actions > .btn-primary { flex: 1; }
.btn-secondary.side-panel-delete { color: var(--rose-600); background: #fff; border-color: #F0C9D2; }
.btn-secondary.side-panel-delete:hover { background: var(--rose-100); }

/* Online booking ↔ patient file (appointment card) */
.appointment-patient-file { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: -4px 0 10px; cursor: default; }
.appointment-patient-file small { color: var(--ink-soft); }
.phone-verified-pill {
	display: inline-block;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--mint-100);
	color: var(--mint-700);
	font-size: 11.5px;
	font-weight: 600;
}
.appointment-patient-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.appointment-patient-actions .btn-secondary { padding: 7px 12px; font-size: 12.5px; }
.appointment-patient-actions input { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 13.5px; background: #FBFAF8; }

/* ---------- SweetAlert2 popups in the app's look (js/swal-theme.js) ---------- */

.swal2-container.swal2-backdrop-show { background: rgba(74, 51, 58, 0.38) !important; }
.swal2-popup.app-swal {
	width: min(440px, calc(100vw - 32px));
	padding: 28px 26px 24px;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 30px 60px -20px rgba(74, 51, 58, 0.45);
	font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
	color: var(--ink);
}
.app-swal::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	border-radius: 18px 18px 0 0;
	background: linear-gradient(90deg, var(--mint-600), var(--rose-600));
}
.app-swal .swal2-title {
	padding: 6px 0 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
}
.app-swal .swal2-html-container {
	margin: 8px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink-soft);
}
/* Icons are drawn in em: scale them through font-size (5em box = 60px). */
.app-swal .swal2-icon {
	font-size: 12px;
	margin: 6px auto 10px;
}
.app-swal .swal2-icon .swal2-icon-content { font-weight: 600; }
.app-swal .swal2-icon.swal2-warning { border-color: #EBC79A; color: #D49A4E; background: #FDF6EC; }
.app-swal .swal2-icon.swal2-info,
.app-swal .swal2-icon.swal2-question { border-color: var(--mint-300); color: var(--mint-700); background: var(--mint-100); }
.app-swal .swal2-icon.swal2-error { border-color: #F0C9D2; background: var(--rose-100); }
.app-swal .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--rose-600); }
.app-swal .swal2-icon.swal2-success { border-color: var(--mint-300); }
.app-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(95, 182, 172, 0.35); }
.app-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--mint-600); }
.app-swal .swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.app-swal .swal2-icon.swal2-success .swal2-success-fix { background-color: transparent; }
.app-swal .swal2-actions.app-swal-actions {
	gap: 10px;
	margin: 22px 0 0;
	flex-wrap: wrap;
}
.app-swal .swal2-actions .btn-primary,
.app-swal .swal2-actions .btn-secondary,
.app-swal .swal2-actions .btn-danger {
	margin: 0;
	height: 40px;
	min-width: 120px;
	padding: 0 20px;
	font-size: 14px;
}
.app-swal .swal2-actions .btn-danger { box-shadow: 0 10px 20px -12px rgba(201, 116, 138, 0.6); }
.app-swal .swal2-close { color: var(--ink-soft); font-size: 26px; }
.app-swal .swal2-close:hover { color: var(--ink); }
.app-swal .swal2-input,
.app-swal .swal2-select,
.app-swal .swal2-textarea {
	margin: 14px 0 0;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	border: 1px solid var(--border);
	border-radius: 11px;
	background: #FBFAF8;
	box-shadow: none;
}
.app-swal .swal2-input:focus,
.app-swal .swal2-select:focus,
.app-swal .swal2-textarea:focus { border-color: var(--mint-500); box-shadow: 0 0 0 3px var(--mint-100); }
.app-swal .swal2-validation-message { background: var(--rose-100); color: var(--mauve-700); border-radius: 10px; font-size: 13px; }
.app-swal .swal2-timer-progress-bar { background: var(--mint-500); }

/* SMS top-up: packages locked while redirecting to the payment page. */
.package-grid.is-busy .package-option { pointer-events: none; opacity: 0.5; transform: none; }
.package-grid.is-busy .package-option.is-chosen { opacity: 1; border-color: var(--mint-500); }
.package-busy { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--mint-700); font-weight: 500; }
.package-busy .spinner {
	width: 13px;
	height: 13px;
	border: 2px solid var(--mint-300);
	border-top-color: var(--mint-600);
	border-radius: 50%;
	display: inline-block;
	animation: package-spin 0.8s linear infinite;
}
@keyframes package-spin { to { transform: rotate(360deg); } }

/* ---------- Business Settings > Calendar: opening hours ---------- */

.opening-hours-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.settings-card .opening-hours-row,
.opening-hours-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	color: var(--ink);
	background: #FBFAF8;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	box-shadow: none;
	transform: none;
}
button.opening-hours-row { cursor: pointer; }
.settings-card button.opening-hours-row:hover { border-color: var(--mint-500); filter: none; transform: none; }
.settings-card .opening-hours-row.selected { border-color: var(--mint-600); background: var(--mint-100); box-shadow: 0 0 0 3px var(--mint-100); }
.opening-hours-day { font-weight: 600; text-transform: capitalize; }
.opening-hours-time { color: var(--mint-700); font-weight: 500; text-align: right; }
.opening-hours-row.closed .opening-hours-time { color: var(--ink-soft); font-weight: 400; }
.opening-hours-chosen { font-weight: 600; font-size: 14px; color: var(--mint-700); text-transform: capitalize; }

/* ---------- Online Booking > Public Profile ---------- */

.public-logo-row { display: flex; align-items: center; gap: 16px; margin: 12px 0 16px; flex-wrap: wrap; }
.public-logo-preview {
	width: 84px;
	height: 84px;
	flex: none;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.public-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.public-logo-preview.initials {
	border: none;
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--mint-600), var(--rose-600));
}
.public-logo-actions { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 200px; }
.public-logo-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.public-logo-buttons .btn-secondary { flex: none; }
.settings-card .field-group textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: #FBFAF8; resize: vertical; }
.settings-card .field-group textarea:focus { outline: none; border-color: var(--mint-500); box-shadow: 0 0 0 3px var(--mint-100); background: #fff; }

/* ---------- Patients > Patient forms (QR intake) ---------- */

.intake-button { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.intake-badge {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--rose-600);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.intake-hint { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.intake-list { display: flex; flex-direction: column; gap: 8px; }
.intake-empty { padding: 14px; border-radius: 12px; background: #F8F5F6; color: var(--ink-soft); font-size: 13.5px; }
.intake-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 11px 13px;
	text-align: left;
	font-family: inherit;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	cursor: pointer;
}
.intake-row:hover { border-color: var(--mint-500); }
.intake-row strong { display: block; font-size: 14px; }
.intake-row small { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.intake-when { font-size: 11.5px; color: var(--mint-700); font-weight: 600; white-space: nowrap; }
.intake-head h4 { margin: 0; font-size: 17px; }
.intake-head small { color: var(--ink-soft); font-size: 12px; }
.intake-section { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #FBFAF8; border: 1px solid var(--border); }
.intake-section > strong { font-size: 13px; color: var(--mint-700); text-transform: uppercase; letter-spacing: .03em; }
.intake-line { display: flex; gap: 10px; font-size: 13.5px; }
.intake-line span { color: var(--ink-soft); min-width: 108px; flex: none; }
.intake-line b { font-weight: 500; white-space: pre-line; word-break: break-word; }
.intake-check { font-size: 13px; color: var(--mint-700); font-weight: 500; }
.intake-check.no { color: var(--ink-soft); font-weight: 400; }
.intake-signature { max-width: 100%; height: 90px; object-fit: contain; align-self: flex-start; background: #fff; border: 1px dashed var(--mint-300); border-radius: 10px; margin-top: 4px; }
.intake-link { align-self: flex-start; padding: 0; border: none; background: none; color: var(--mint-700); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.intake-consent-text { font-size: 12px; line-height: 1.55; color: var(--ink-soft); white-space: pre-line; }
.intake-matches { background: var(--rose-100); border-color: #F3D3DB; }
.intake-matches > strong { color: var(--rose-600); }
.intake-matches > small { font-size: 12px; color: var(--mauve-700); }
.intake-match { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff; border-radius: 10px; }
.intake-match b { display: block; font-size: 13.5px; }
.intake-match small { font-size: 11.5px; color: var(--ink-soft); }
.intake-match .btn-secondary { flex: none; height: 32px; }

/* ---------- Dashboard > Patient Forms ---------- */

.forms-status-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.forms-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: 999px;
	cursor: pointer;
}
.forms-chip:hover { border-color: var(--mint-500); }
.forms-chip.active { color: var(--mint-700); background: var(--mint-100); border-color: var(--mint-300); }
.forms-info { position: relative; margin-left: auto; }
.forms-info-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--ink-soft);
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: 50%;
	cursor: pointer;
}
.forms-info-button:hover { color: var(--mint-700); border-color: var(--mint-500); }
.forms-info-popup {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	width: 280px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(60, 40, 50, 0.12);
}
.forms-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.forms-card { margin: 0; }
.forms-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.forms-card-head h3 { margin: 0; }
.forms-status, .intake-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}
.forms-status.pending { background: #FDF3E4; color: #B07A2E; }
.forms-status.accepted, .intake-status.accepted { background: var(--mint-100); color: var(--mint-700); }
.forms-status.rejected, .intake-status.rejected { background: #F3EEEF; color: var(--ink-soft); }
.intake-status { margin: 8px 0 0; }
.nav-badge {
	margin-left: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--rose-600);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.app-sidebar.collapsed .nav-badge { position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.app-sidebar .nav-item a { position: relative; }

/* ---------- Business Settings > Members > Add Member ---------- */

.member-field-hint { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.member-field-hint.error { color: var(--rose-600); }
.modal-field input.invalid { border-color: var(--rose-500); }

/* ---------- Delete Practice (Business Settings) / Delete Account (Profile) ---------- */

.delete-card { max-width: 560px; }
.delete-card .delete-text { color: var(--ink-soft); line-height: 1.55; margin: 0 0 12px; }
.delete-card .delete-text strong { color: var(--ink); }
.delete-steps { margin: 0 0 16px; padding-left: 20px; color: var(--ink); line-height: 1.6; font-size: 14px; }
.delete-tip {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
	padding: 14px 16px;
	background: #FDF3E4;
	border: 1px solid #F1DDBC;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink);
}
.delete-tip strong { color: #8A5A16; }
.delete-tip a { color: var(--mint-700); font-weight: 600; text-decoration: none; }
.delete-tip .checkbox-row { margin-top: 4px; }
.delete-card .btn-danger { width: 100%; margin-top: 6px; }

/* ---------- Admin > Deletions ---------- */

.deletions-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.deletions-list { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
.deletion-card { margin: 0; }
.deletion-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.deletion-head h3 { margin: 0; }
.deletion-type { font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--mint-100); color: var(--mint-700); white-space: nowrap; }
.deletion-type.user { background: #F3EEEF; color: var(--mauve-700, #6E4E56); }
.deletion-when { font-weight: 700; }
.deletion-when.due { color: var(--rose-600); }
.deletion-when.waiting { color: #B07A2E; }
.deletion-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.deletion-actions .btn-danger[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }