/* =====================================================================
   Single Doctor Appointment System — Public (Hospital + Doctor) Styles
   Reskinned to match the reference clinic design system.
   Primary: brand blue #2A322E  ·  Surfaces: cool clinical mist
   All rules scoped under .sdas-auth-wrap / .sdas-dashboard.
   ===================================================================== */

.sdas-auth-wrap,
.sdas-dashboard,
.sdas-modal {
	/* ---- brand (matches reference clinic palette) -------------------- */
	--sdas-brand:       #2A322E;
	--sdas-brand-400:   #748B80;
	--sdas-brand-600:   #222825;
	--sdas-brand-700:   #1B201D;
	--sdas-brand-800:   #141816;
	--sdas-brand-900:   #0E110F;
	--sdas-brand-300:   #A6B4AD;
	--sdas-brand-200:   #CDD5D1;
	--sdas-brand-100:   #E6EAE8;
	--sdas-brand-50:    #F5F7F6;

	/* kept under the original names so every existing rule still resolves */
	--sdas-forest:        var(--sdas-brand);
	--sdas-forest-dark:   var(--sdas-brand-700);
	--sdas-forest-darker: var(--sdas-brand-800);
	--sdas-forest-soft:   var(--sdas-brand-100);
	--sdas-forest-tint:   var(--sdas-brand-200);
	--sdas-accent:        var(--sdas-brand-400);   /* accent */
	--sdas-cream:         #F3F8FB;   /* app background */
	--sdas-cream-2:       #EDF4F7;   /* subtle surface */
	--sdas-surface:       #FFFFFF;
	--sdas-ink:           #0A2A36;
	--sdas-muted:         #47707D;
	--sdas-faint:         #7FA0AB;
	--sdas-border:        #DCE9EF;
	--sdas-border-soft:   #EDF4F7;

	/* status tokens — resolve to shades of the single brand blue, same as
	   the reference clinic system; cancelled stays neutral grey. */
	--sdas-amber:         #222825;   /* pending    → brand-600 */
	--sdas-amber-bg:      #F5F7F6;   /* brand-50 */
	--sdas-green:         #1B201D;   /* approved   → brand-700 */
	--sdas-green-bg:      #E6EAE8;   /* brand-100 */
	--sdas-blue:          #748B80;   /* rescheduled→ brand-400 */
	--sdas-blue-bg:       #F5F7F6;   /* brand-50 */
	--sdas-red:           #0E110F;   /* rejected   → brand-900 */
	--sdas-red-bg:        #E6EAE8;   /* brand-100 */
	--sdas-neutral:       #93A0A8;

	--sdas-shadow:        0 1px 2px rgba(11,42,53,.04), 0 10px 30px -18px rgba(11,42,53,.30);
	--sdas-shadow-sm:     0 1px 2px rgba(11,42,53,.04), 0 6px 18px -14px rgba(11,42,53,.28);
	--sdas-shadow-md:     0 2px 6px rgba(11,42,53,.05), 0 18px 44px -24px rgba(11,42,53,.35);
	--sdas-shadow-lg:     0 24px 60px -20px rgba(14,42,51,.45);
	--sdas-radius:        20px;
	--sdas-radius-sm:     11px;
	--sdas-focus:         0 0 0 3px rgba(42,50,46,.28);
	--sdas-display: "Sora", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sdas-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: var(--sdas-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
* { scrollbar-color: var(--sdas-brand-300) transparent; }
.sdas-dashboard ::-webkit-scrollbar { width: 10px; height: 10px; }
.sdas-dashboard ::-webkit-scrollbar-thumb { background: #C3DDE5; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.sdas-dashboard ::-webkit-scrollbar-thumb:hover { background: var(--sdas-brand-300); background-clip: content-box; }

/* Hide admin bar / theme chrome noise for hospital users */
.sdas-hospital-user #wpadminbar { display: none; }
.sdas-hospital-user { margin-top: 0 !important; background: var(--sdas-cream); }

/* =====================================================================
   AUTH PAGES  (login / register / change password / forgot / doctor)
   ===================================================================== */
.sdas-auth-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 78vh;
	padding: 72px 20px;
	background:
		radial-gradient(1100px 460px at 50% -12%, var(--sdas-brand-100) 0%, transparent 62%),
		var(--sdas-cream);
}

.sdas-auth-card {
	position: relative;
	background: var(--sdas-surface);
	border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius);
	padding: 42px 40px 38px;
	max-width: 460px;
	width: 100%;
	box-shadow: 0 1px 2px rgba(10,42,54,.04), 0 30px 60px -34px rgba(10,42,54,.38);
}
.sdas-auth-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	border-radius: var(--sdas-radius) var(--sdas-radius) 0 0;
	background: linear-gradient(90deg, var(--sdas-brand), var(--sdas-brand-700));
}
.sdas-auth-card-center { text-align: center; }

/* ---- Role switch (Hospital / Doctor) on the single shared login page ---- */
.sdas-role-switch {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin: 0 0 26px;
	background: var(--sdas-cream);
	border: 1px solid var(--sdas-border);
	border-radius: 999px;
}
.sdas-role-tab {
	padding: 8px 20px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sdas-muted);
	text-decoration: none;
	transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.sdas-role-tab:hover { color: var(--sdas-brand-700); }
.sdas-role-tab.active {
	background: #fff;
	color: var(--sdas-brand-700);
	box-shadow: 0 1px 2px rgba(10,42,54,.06), 0 6px 14px -8px rgba(10,42,54,.25);
}

/* ==========================================================================
   Split sign-in layout — used ONLY on the shared login page (Hospital +
   Doctor). Left: full-bleed healthcare photo with a logo badge · Right: the
   login form on a light panel. Scoped to .sdas-auth-split, so registration /
   forgot / change-password / must-login keep the original centered card.
   ========================================================================== */
.sdas-auth-wrap.sdas-auth-split {
	display: grid;
	grid-template-columns: 1.08fr 1fr;
	align-items: stretch;
	padding: 0;
	min-height: min(94vh, 920px);
	background: var(--sdas-brand-50);
}

/* Left: full-bleed photo. The image is set inline on the element from
   assets/img/auth-side.jpg — REPLACE that one file with your own licensed
   photo (keep the same name/path) to change it; no CSS edit needed. The
   colour below is only the fallback shown if the image is missing. */
.sdas-auth-visual {
	position: relative;
	overflow: hidden;
	background-color: var(--sdas-brand-700);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.sdas-auth-visual::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(8,42,54,.30) 0%, rgba(8,42,54,0) 26%, rgba(8,42,54,.14) 100%);
	pointer-events: none;
}

/* Logo badge pinned top-left over the photo */
.sdas-auth-logo {
	position: absolute; z-index: 2; top: 22px; left: 22px;
	display: inline-flex; align-items: center;
	background: #fff; border-radius: 14px;
	padding: 9px 15px;
	box-shadow: 0 10px 26px -14px rgba(8,42,54,.55);
}
.sdas-auth-logo a { display: block; line-height: 0; }
.sdas-auth-logo img,
.sdas-auth-logo .custom-logo { display: block; height: 40px; width: auto; max-width: 170px; }
.sdas-auth-logo-text { font-family: var(--sdas-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--sdas-brand-700); }

/* Right: the login card, centered on the light panel */
.sdas-auth-split .sdas-auth-card {
	margin: auto;
	max-width: 460px;
	border-radius: 20px;
	padding: 40px 40px 34px;
}

/* Stack on tablet / mobile: photo on top, form beneath */
@media (max-width: 860px) {
	.sdas-auth-wrap.sdas-auth-split { grid-template-columns: 1fr; min-height: 0; }
	.sdas-auth-visual { min-height: 220px; }
	.sdas-auth-logo { top: 16px; left: 16px; padding: 8px 13px; }
	.sdas-auth-logo img, .sdas-auth-logo .custom-logo { height: 34px; }
	.sdas-auth-split .sdas-auth-card { margin: 0 auto; border-radius: 16px; padding: 34px 24px; }
}
@media (max-width: 520px) {
	.sdas-auth-visual { min-height: 150px; }
}
.sdas-auth-card h2 {
	margin: 6px 0 8px;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--sdas-ink);
	line-height: 1.15;
	font-family: var(--sdas-display);
}
.sdas-muted { color: var(--sdas-muted); font-size: 14.5px; margin: 0 0 26px; line-height: 1.6; }

/* Brand mark on auth cards */
.sdas-auth-card h2::before {
	content: "";
	display: block;
	width: 52px; height: 52px;
	margin: 0 0 18px;
	border-radius: 14px;
	background:
		linear-gradient(140deg, var(--sdas-brand) 0%, var(--sdas-brand-700) 100%)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E")
		center / 26px no-repeat;
	box-shadow: 0 6px 18px -6px rgba(42,50,46,.75);
}
.sdas-auth-card-center h2::before { margin-left: auto; margin-right: auto; }

/* =====================================================================
   FORMS  (shared by auth + dashboard)
   ===================================================================== */
.sdas-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--sdas-ink);
	margin: 18px 0 7px;
	letter-spacing: .01em;
}
.sdas-form label:first-child { margin-top: 0; }
.sdas-form input[type=text],
.sdas-form input[type=email],
.sdas-form input[type=tel],
.sdas-form input[type=password],
.sdas-form input[type=number],
.sdas-form input[type=date],
.sdas-form input[type=time],
.sdas-form select,
.sdas-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius-sm);
	font-size: 14.5px;
	background: #fff;
	color: var(--sdas-ink);
	box-sizing: border-box;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.sdas-form textarea { resize: vertical; min-height: 64px; }
.sdas-form input:hover,
.sdas-form select:hover,
.sdas-form textarea:hover { border-color: var(--sdas-brand-300); }
.sdas-form input:focus,
.sdas-form select:focus,
.sdas-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--sdas-brand);
	box-shadow: var(--sdas-focus);
}
.sdas-form input::placeholder, .sdas-form textarea::placeholder { color: var(--sdas-faint); }
.sdas-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sdas-checkbox-label {
	display: flex; align-items: center; gap: 9px;
	font-weight: 500 !important; margin-top: 18px; font-size: 14px; color: var(--sdas-ink);
	cursor: pointer;
}
.sdas-checkbox-label input { width: auto; accent-color: var(--sdas-forest); }

/* ---- Password field with show / hide toggle ---- */
.sdas-pass-field { position: relative; }
.sdas-pass-field input { padding-right: 44px !important; }
.sdas-pass-toggle {
	position: absolute; top: 0; right: 0; height: 100%; width: 42px;
	border: none; background: transparent; cursor: pointer; padding: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--sdas-faint); border-radius: 0 var(--sdas-radius-sm) var(--sdas-radius-sm) 0;
	transition: color .15s ease;
}
.sdas-pass-toggle:hover { color: var(--sdas-forest); }
.sdas-pass-toggle::before {
	content: "";
	width: 20px; height: 20px;
	background: currentColor;
	-webkit-mask: center / 20px no-repeat var(--sdas-eye);
	mask: center / 20px no-repeat var(--sdas-eye);
	--sdas-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.sdas-pass-toggle.is-on::before {
	--sdas-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 7 10 7a13.2 13.2 0 0 1-1.67 2.4M6.6 6.6C3.6 8.3 2 11 2 11s3.5 7 10 7a9 9 0 0 0 5.4-1.6'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.sdas-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: var(--sdas-radius-sm);
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .005em;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease, border-color .15s ease, transform .14s ease, box-shadow .18s ease, color .15s ease;
}
.sdas-btn:active { transform: translateY(0); }
.sdas-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.sdas-btn:focus-visible { outline: none; box-shadow: var(--sdas-focus); }

/* Primary — solid brand, always white label (kept white on hover) */
.sdas-btn-primary {
	background: linear-gradient(140deg, var(--sdas-brand) 0%, var(--sdas-brand-600) 100%);
	color: #fff !important;
	box-shadow: 0 6px 16px -8px rgba(42,50,46,.9);
}
.sdas-btn-primary:hover {
	background: linear-gradient(140deg, var(--sdas-brand-600) 0%, var(--sdas-brand-700) 100%);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -10px rgba(42,50,46,.95);
}
.sdas-btn-primary:active { transform: translateY(0); box-shadow: 0 5px 12px -8px rgba(42,50,46,.9); }
.sdas-form .sdas-btn-primary { margin-top: 26px; width: 100%; padding: 13px 20px; }

/* Outline / secondary — brand label, fills to brand with white label on hover */
.sdas-btn-outline {
	background: #fff;
	border-color: var(--sdas-border);
	color: var(--sdas-brand-700);
}
.sdas-btn-outline:hover {
	border-color: var(--sdas-brand);
	background: var(--sdas-brand);
	color: #fff !important;
	box-shadow: 0 8px 18px -10px rgba(42,50,46,.85);
}
.sdas-btn-outline:active { transform: translateY(0); }

.sdas-btn-small { padding: 8px 14px; font-size: 12.5px; border-radius: 10px; }

/* Danger — soft tint, fills to deep teal with white label on hover */
.sdas-btn-danger { background: var(--sdas-red-bg); color: var(--sdas-brand-900); border-color: transparent; }
.sdas-btn-danger:hover { background: var(--sdas-brand-900); color: #fff !important; box-shadow: 0 8px 18px -10px rgba(8,60,73,.6); }
.sdas-btn-danger:active { transform: translateY(0); }

/* ---------------------------------------------------------------------
   Theme-proofing: raise specificity so aggressive parent themes can't
   repaint our action buttons (e.g. a global `button`/link colour). The
   label stays white on hover for every filled action button.
   --------------------------------------------------------------------- */
.sdas-dashboard .sdas-btn-primary,
.sdas-modal .sdas-btn-primary,
.sdas-auth-wrap .sdas-btn-primary {
	background: linear-gradient(140deg, var(--sdas-brand) 0%, var(--sdas-brand-600) 100%) !important;
	border-color: transparent !important;
	color: #fff !important;
}
.sdas-dashboard .sdas-btn-primary:hover,
.sdas-modal .sdas-btn-primary:hover,
.sdas-auth-wrap .sdas-btn-primary:hover {
	background: linear-gradient(140deg, var(--sdas-brand-600) 0%, var(--sdas-brand-700) 100%) !important;
	color: #fff !important;
}
.sdas-dashboard .sdas-btn-outline:hover,
.sdas-modal .sdas-btn-outline:hover { background: var(--sdas-brand) !important; border-color: var(--sdas-brand) !important; color: #fff !important; }
.sdas-dashboard .sdas-btn-danger:hover,
.sdas-modal .sdas-btn-danger:hover { background: var(--sdas-brand-900) !important; color: #fff !important; }
.sdas-dashboard .sdas-btn-approve:hover { background: var(--sdas-green) !important; color: #fff !important; }
.sdas-dashboard .sdas-btn-reject:hover { background: var(--sdas-brand-900) !important; color: #fff !important; }
.sdas-dashboard .sdas-btn-neutral:hover { background: var(--sdas-brand) !important; border-color: var(--sdas-brand) !important; color: #fff !important; }

/* Loading spinner state */
.sdas-btn.is-loading { color: transparent !important; pointer-events: none; }
.sdas-btn.is-loading::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border: 2px solid currentColor; border-top-color: transparent;
	border-radius: 50%; color: #fff;
	animation: sdasSpin .6s linear infinite;
}
.sdas-btn-outline.is-loading::after,
.sdas-btn-neutral.is-loading::after { color: var(--sdas-forest); }
@keyframes sdasSpin { to { transform: rotate(360deg); } }

.sdas-switch-link { text-align: center; font-size: 13.5px; color: var(--sdas-muted); margin-top: 22px; }
.sdas-switch-link a { color: var(--sdas-brand-700); font-weight: 600; text-decoration: none; }
.sdas-switch-link a:hover { text-decoration: underline; }

/* =====================================================================
   NOTICES / HINTS
   ===================================================================== */
.sdas-notice { padding: 12px 15px; border-radius: 12px; font-size: 14px; margin-bottom: 20px; border: 1px solid transparent; line-height: 1.5; }
.sdas-notice-success { background: var(--sdas-green-bg); color: var(--sdas-green); border-color: var(--sdas-brand-200); }
.sdas-notice-error   { background: var(--sdas-red-bg);   color: var(--sdas-red);   border-color: var(--sdas-brand-200); }
.sdas-hint { font-size: 12.8px; color: var(--sdas-muted); margin: 6px 0 10px; line-height: 1.5; }
.sdas-hint-error { color: var(--sdas-red); }

/* =====================================================================
   DASHBOARD SHELL  (sidebar + main)
   ===================================================================== */
.sdas-dashboard {
	display: grid;
	grid-template-columns: 268px 1fr;
	height: 100vh;
	overflow: hidden;
	background: var(--sdas-cream);
	align-items: stretch;
}

/* ---- Sidebar ---- */
.sdas-sidebar {
	background: #2A322E;
	background-image: linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(0,0,0,.10) 100%);
	color: #EAF8FC;
	padding: 20px 14px 18px;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: 2px 0 22px -14px rgba(8,58,73,.55);
}
.sdas-brand { display: flex; align-items: center; gap: 11px; padding: 2px 6px 22px; }
.sdas-brand-logo {
	width: 40px; height: 40px; flex: none;
	border-radius: 11px;
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 16px -8px rgba(6,42,54,.6);
}
.sdas-brand-logo svg { width: 20px; height: 20px; stroke: var(--sdas-brand); }
.sdas-brand-text { min-width: 0; }
.sdas-brand-text strong {
	display: block; font-size: 15px; font-weight: 600; color: #fff;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em;
	font-family: var(--sdas-display);
}
.sdas-brand-text span { display: block; font-size: 10.5px; color: rgba(255,255,255,.78); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }

.sdas-side-label {
	font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
	color: rgba(255,255,255,.7); padding: 6px 10px; margin-top: 10px; font-weight: 700;
}
.sdas-nav { display: flex; flex-direction: column; gap: 2px; }
.sdas-nav .sdas-tab {
	display: flex; align-items: center; gap: 11px;
	width: 100%;
	background: none; border: none;
	padding: 10px 12px;
	border-radius: var(--sdas-radius-sm);
	font-size: 14.5px; font-weight: 500;
	color: rgba(255,255,255,.90);
	cursor: pointer;
	text-align: left;
	transition: background .16s ease, color .16s ease, transform .16s ease;
}
.sdas-nav .sdas-tab svg { width: 18px; height: 18px; flex: none; stroke: currentColor; opacity: .95; }
.sdas-nav .sdas-tab:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateX(2px); }
.sdas-nav .sdas-tab.active {
	background: #fff;
	color: var(--sdas-brand-800); font-weight: 600;
	box-shadow: 0 6px 16px -8px rgba(6,42,54,.55);
	transform: none;
}
.sdas-nav .sdas-tab.active svg { stroke: var(--sdas-brand); }
.sdas-nav-count {
	margin-left: auto; font-style: normal;
	background: #fff; color: var(--sdas-brand-800);
	font-size: 11px; font-weight: 700; line-height: 1;
	padding: 3px 7px; border-radius: 999px;
}
.sdas-nav .sdas-tab.active .sdas-nav-count { background: var(--sdas-brand); color: #fff; }
.sdas-sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.28); }
.sdas-sidebar-footer .sdas-btn {
	width: 100%;
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.22);
	color: #fff;
	box-shadow: none;
}
.sdas-sidebar-footer .sdas-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.34); color: #fff; transform: none; }

/* ---- Main column ---- */
.sdas-main { min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.sdas-topbar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 15px 32px;
	background: rgba(255,255,255,.86);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--sdas-border);
	position: sticky; top: 0; z-index: 20;
}
.sdas-topbar-title { font-size: 20px; font-weight: 650; letter-spacing: -.02em; margin: 0; color: var(--sdas-ink); font-family: var(--sdas-display); }
.sdas-topbar-sub { font-size: 12.5px; color: var(--sdas-muted); margin: 2px 0 0; }
.sdas-user-chip {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1px solid var(--sdas-border);
	border-radius: 999px; padding: 6px 15px 6px 6px; font-size: 13px; font-weight: 600; color: var(--sdas-ink);
	box-shadow: var(--sdas-shadow-sm);
}
.sdas-user-avatar {
	width: 32px; height: 32px; border-radius: 50%;
	background: linear-gradient(140deg, var(--sdas-brand) 0%, var(--sdas-brand-700) 100%); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 12.5px; font-weight: 700;
	box-shadow: 0 5px 14px -5px rgba(42,50,46,.8);
	font-family: var(--sdas-display);
}
.sdas-content { padding: 26px 32px 48px; }
.sdas-tab-panel > *:first-child,
.sdas-card-box:first-child { margin-top: 0; }

.sdas-dash-header { display: none; }
.sdas-tabs { display: none; }
.sdas-tab-panel { display: none; animation: sdasFade .25s ease; }
.sdas-tab-panel.active { display: block; }
@keyframes sdasFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   STAT CARDS (Overview)
   ===================================================================== */
.sdas-stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 28px;
}
.sdas-stat {
	position: relative;
	background: linear-gradient(168deg, #fff 0%, var(--sdas-brand-50) 100%);
	border: 1px solid var(--sdas-brand-100);
	border-radius: var(--sdas-radius);
	padding: 20px;
	box-shadow: var(--sdas-shadow-sm);
	display: flex; flex-direction: column; gap: 14px;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.sdas-stat:hover { box-shadow: var(--sdas-shadow-md); transform: translateY(-2px); }
.sdas-stat::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: linear-gradient(180deg, var(--sdas-brand), var(--sdas-brand-700));
}
.sdas-stat:has(.is-amber)::before { background: linear-gradient(180deg, var(--sdas-brand-300), var(--sdas-amber)); }
.sdas-stat:has(.is-green)::before { background: linear-gradient(180deg, var(--sdas-brand-400), var(--sdas-green)); }
.sdas-stat:has(.is-blue)::before  { background: linear-gradient(180deg, var(--sdas-brand-200), var(--sdas-blue)); }
.sdas-stat-top { display: flex; align-items: center; justify-content: space-between; }
.sdas-stat-icon {
	width: 42px; height: 42px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: var(--sdas-brand-100);
}
.sdas-stat-icon svg { width: 20px; height: 20px; stroke: var(--sdas-brand-700); }
.sdas-stat-icon.is-amber { background: var(--sdas-brand-50); }
.sdas-stat-icon.is-amber svg { stroke: var(--sdas-brand-600); }
.sdas-stat-icon.is-green { background: var(--sdas-brand-100); }
.sdas-stat-icon.is-green svg { stroke: var(--sdas-brand-700); }
.sdas-stat-icon.is-blue { background: var(--sdas-brand-50); }
.sdas-stat-icon.is-blue svg { stroke: var(--sdas-brand-400); }
.sdas-stat-value { font-size: 32px; font-weight: 700; line-height: 1.15; color: var(--sdas-ink); letter-spacing: -.03em; font-family: var(--sdas-display); }
.sdas-stat-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sdas-muted); font-weight: 700; margin-top: 6px; }

/* =====================================================================
   CARD BOX / SECTIONS
   ===================================================================== */
.sdas-card-box {
	background: var(--sdas-surface);
	border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius);
	padding: 26px 28px;
	margin-bottom: 22px;
	box-shadow: var(--sdas-shadow);
	transition: box-shadow .2s ease;
}
.sdas-card-box:hover { box-shadow: var(--sdas-shadow-md); }
.sdas-card-box > h3 {
	margin: -26px -28px 20px; padding: 17px 22px 16px; font-size: 15.5px; font-weight: 650; color: var(--sdas-ink);
	letter-spacing: -.01em; border-bottom: 1px solid var(--sdas-border-soft);
	background: linear-gradient(180deg, #fff 0%, var(--sdas-brand-50) 260%);
	border-radius: var(--sdas-radius) var(--sdas-radius) 0 0;
	font-family: var(--sdas-display);
}
.sdas-card-box h4 {
	margin: 24px 0 6px; font-size: 10.5px; text-transform: uppercase;
	letter-spacing: .13em; color: var(--sdas-brand-600); font-weight: 700;
}
.sdas-section-title { margin: 0 0 16px; font-size: 17px; font-weight: 700; color: var(--sdas-ink); letter-spacing: -.01em; }

/* Two-column card layout (doctor account panel) */
.sdas-card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.sdas-card-grid-2 .sdas-card-box { margin-bottom: 0; }

/* =====================================================================
   TABLES
   ===================================================================== */
.sdas-table {
	width: 100%; border-collapse: collapse;
	background: var(--sdas-surface);
	border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius);
	overflow: hidden;
	box-shadow: var(--sdas-shadow-sm);
}
.sdas-table th, .sdas-table td {
	text-align: left; padding: 14px 16px; font-size: 13.8px;
	border-bottom: 1px solid var(--sdas-border-soft); vertical-align: middle;
}
.sdas-table th {
	background: linear-gradient(180deg, var(--sdas-brand-50), #fff); font-weight: 700; color: var(--sdas-brand-800);
	text-transform: uppercase; font-size: 10.5px; letter-spacing: .11em;
}
.sdas-table tbody tr { transition: background .14s ease; }
.sdas-table tbody tr:hover { background: var(--sdas-brand-50); }
.sdas-table tr:last-child td { border-bottom: none; }
.sdas-table td small { color: var(--sdas-muted); }
.sdas-table td strong { color: var(--sdas-ink); }

/* status edge on first cell */
.sdas-table tr[data-status] td:first-child { box-shadow: inset 3px 0 0 var(--sdas-border); }
.sdas-table tr[data-status="pending"]     td:first-child { box-shadow: inset 3px 0 0 var(--sdas-amber); }
.sdas-table tr[data-status="approved"]    td:first-child { box-shadow: inset 3px 0 0 var(--sdas-green); }
.sdas-table tr[data-status="rescheduled"] td:first-child { box-shadow: inset 3px 0 0 var(--sdas-blue); }
.sdas-table tr[data-status="rejected"]    td:first-child { box-shadow: inset 3px 0 0 var(--sdas-red); }
.sdas-table tr[data-status="cancelled"]   td:first-child { box-shadow: inset 3px 0 0 #B6C6CB; }

/* =====================================================================
   BADGES
   ===================================================================== */
.sdas-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
}
.sdas-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sdas-badge-pending     { background: var(--sdas-amber-bg); color: var(--sdas-amber); }
.sdas-badge-approved    { background: var(--sdas-green-bg); color: var(--sdas-green); }
.sdas-badge-rescheduled { background: var(--sdas-blue-bg);  color: var(--sdas-blue); }
.sdas-badge-rejected  { background: var(--sdas-red-bg); color: var(--sdas-red); }
.sdas-badge-cancelled { background: #ECF1F2; color: #5F7B83; }
.sdas-badge-mini { padding: 2px 9px; font-size: 10px; }

/* =====================================================================
   PATIENT CHIPS (read-only summary — overview / history tables)
   ===================================================================== */
.sdas-patient-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sdas-patient-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sdas-patient-chip-name { font-weight: 600; font-size: 13.5px; color: var(--sdas-ink); }

/* =====================================================================
   PER-PATIENT ROWS (doctor dashboard)
   ===================================================================== */
.sdas-appt-patient-list { display: flex; flex-direction: column; gap: 10px; }
.sdas-appt-patient-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	flex-wrap: wrap;
	padding: 9px 12px;
	background: var(--sdas-cream-2);
	border: 1px solid var(--sdas-border-soft);
	border-radius: var(--sdas-radius-sm);
}
.sdas-appt-patient-info { min-width: 0; flex: 1 1 auto; }
.sdas-appt-patient-info small { color: var(--sdas-muted); }
.sdas-btn-approve { background: var(--sdas-green-bg); color: var(--sdas-green); border-color: transparent; }
.sdas-btn-approve:hover { background: var(--sdas-green); color: #fff !important; box-shadow: 0 8px 18px -10px rgba(11,114,142,.6); }
.sdas-btn-reject { background: var(--sdas-red-bg); color: var(--sdas-red); border-color: transparent; }
.sdas-btn-reject:hover { background: var(--sdas-brand-900); color: #fff !important; box-shadow: 0 8px 18px -10px rgba(8,60,73,.6); }
.sdas-btn-neutral { background: #fff; border-color: var(--sdas-border); color: var(--sdas-brand-700); }
.sdas-btn-neutral:hover { background: var(--sdas-brand); border-color: var(--sdas-brand); color: #fff !important; box-shadow: 0 8px 18px -10px rgba(42,50,46,.8); }

/* =====================================================================
   PATIENTS MODULE
   ===================================================================== */
.sdas-panel-header-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 6px; }
.sdas-panel-header-row h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--sdas-ink); font-family: var(--sdas-display); }
.sdas-panel-header-row .sdas-btn { flex: none; }

.sdas-patient-select-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px; }
.sdas-patient-select-toolbar label { margin: 0; }

.sdas-patient-checklist {
	display: flex; flex-direction: column; gap: 2px;
	border: 1px solid var(--sdas-border); border-radius: var(--sdas-radius);
	max-height: 280px; overflow-y: auto;
	background: #fff;
	margin-bottom: 16px;
}
.sdas-patient-check-row {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--sdas-border-soft);
	cursor: pointer;
	font-weight: 400;
	transition: background .12s ease;
}
.sdas-patient-check-row:last-child { border-bottom: none; }
.sdas-patient-check-row:hover { background: var(--sdas-cream-2); }
.sdas-patient-check-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--sdas-forest); flex: none; }
.sdas-patient-check-name { font-weight: 600; font-size: 13.8px; color: var(--sdas-ink); }
.sdas-patient-check-meta { margin-left: auto; font-size: 12px; color: var(--sdas-muted); }

.sdas-empty-inline { padding: 16px; margin-bottom: 16px; background: var(--sdas-cream-2); border: 1px dashed var(--sdas-border); border-radius: var(--sdas-radius); }
.sdas-empty-inline p { margin: 0 0 10px; color: var(--sdas-muted); }

#sdas-patients-table td { vertical-align: middle; }

/* =====================================================================
   LEGEND + CALENDAR (FullCalendar container)
   ===================================================================== */
.sdas-legend { display: flex; gap: 22px; margin-bottom: 16px; font-size: 13px; color: var(--sdas-muted); flex-wrap: wrap; }
.sdas-legend span { display: inline-flex; align-items: center; }
.sdas-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }

#sdas-hospital-calendar {
	background: var(--sdas-surface);
	border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius);
	padding: 20px;
	box-shadow: var(--sdas-shadow-sm);
}
.sdas-dashboard .fc { --fc-border-color: var(--sdas-border-soft); --fc-today-bg-color: var(--sdas-brand-50); }
.sdas-dashboard .fc .fc-toolbar-title { font-size: 18px; font-weight: 650; color: var(--sdas-ink); font-family: var(--sdas-display); }
.sdas-dashboard .fc .fc-button {
	background: #fff; border: 1px solid var(--sdas-border); color: var(--sdas-brand-700);
	font-weight: 600; text-transform: capitalize; box-shadow: none; padding: 6px 12px; border-radius: 9px;
}
.sdas-dashboard .fc .fc-button:hover { background: var(--sdas-brand-50); border-color: var(--sdas-brand-300); }
.sdas-dashboard .fc .fc-button-primary:not(:disabled).fc-button-active,
.sdas-dashboard .fc .fc-button-primary:not(:disabled):active { background: var(--sdas-brand); border-color: var(--sdas-brand); color: #fff; }
.sdas-dashboard .fc .fc-col-header-cell-cushion { color: var(--sdas-muted); font-weight: 600; padding: 8px; }
.sdas-dashboard .fc .fc-daygrid-day-number { color: var(--sdas-ink); }

/* =====================================================================
   DOCTOR DASHBOARD — filter pills, availability, modal
   ===================================================================== */
.sdas-filter-pills {
	display: inline-flex; flex-wrap: wrap; gap: 5px;
	background: #fff; border: 1px solid var(--sdas-border);
	border-radius: 999px; padding: 5px; margin-bottom: 20px;
	box-shadow: var(--sdas-shadow-sm);
}
.sdas-filter-pills a {
	display: inline-block; padding: 7px 15px; border-radius: 999px;
	font-size: 13px; font-weight: 600; color: var(--sdas-muted); text-decoration: none;
	transition: background .14s ease, color .14s ease;
}
.sdas-filter-pills a:hover { color: var(--sdas-brand-700); background: var(--sdas-brand-50); }
.sdas-filter-pills a.active { background: var(--sdas-brand); color: #fff; }

.sdas-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Weekly availability table */
.sdas-avail-table .sdas-day-start,
.sdas-avail-table .sdas-day-end { max-width: 150px; }
.sdas-avail-table input[type=time] {
	padding: 8px 10px; border: 1px solid var(--sdas-border); border-radius: 8px;
	background: var(--sdas-cream); font-size: 14px;
}
.sdas-avail-table input[type=time]:focus { outline: none; border-color: var(--sdas-forest); box-shadow: var(--sdas-focus); background:#fff; }
.sdas-avail-table td { text-align: left; }
.sdas-avail-check { width: 18px; height: 18px; accent-color: var(--sdas-forest); }

/* Modal */
.sdas-modal {
	position: fixed; inset: 0;
	background: rgba(11,42,53,.55);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
	animation: sdasFade .2s ease;
}
.sdas-modal-content {
	position: relative;
	background: #fff;
	border: 1px solid var(--sdas-border);
	border-radius: 20px;
	padding: 26px 30px 28px;
	width: 540px; max-width: 100%;
	max-height: 90vh; overflow-y: auto;
	box-shadow: var(--sdas-shadow-lg);
	animation: sdasModalIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes sdasModalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* Header bar (bleeds to the card edges, brand accent) */
.sdas-modal-content h2 {
	position: relative;
	margin: -26px -30px 22px; padding: 20px 30px 18px 30px;
	font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--sdas-ink);
	border-bottom: 1px solid var(--sdas-border-soft);
	background: linear-gradient(180deg, #fff 0%, var(--sdas-brand-50) 260%);
	border-radius: 20px 20px 0 0;
	font-family: var(--sdas-display);
}
.sdas-modal-content h2::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: linear-gradient(180deg, var(--sdas-brand), var(--sdas-brand-700));
	border-radius: 20px 0 0 0;
}

.sdas-modal-content label { display: block; font-weight: 600; font-size: 13px; margin: 16px 0 6px; color: var(--sdas-ink); }
.sdas-modal-content input,
.sdas-modal-content select,
.sdas-modal-content textarea {
	width: 100%; padding: 11px 13px; border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius-sm); box-sizing: border-box; font-size: 14.5px;
	background: #fff; color: var(--sdas-ink);
	transition: border-color .16s ease, box-shadow .16s ease;
}
.sdas-modal-content input:hover,
.sdas-modal-content select:hover,
.sdas-modal-content textarea:hover { border-color: var(--sdas-brand-300); }
.sdas-modal-content input:focus,
.sdas-modal-content select:focus,
.sdas-modal-content textarea:focus { outline: none; border-color: var(--sdas-brand); box-shadow: var(--sdas-focus); background: #fff; }
.sdas-modal-content textarea { resize: vertical; min-height: 72px; }

/* Footer action bar (bleeds to the card edges) */
.sdas-modal-actions {
	margin: 26px -30px -28px; padding: 18px 30px 22px;
	display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
	border-top: 1px solid var(--sdas-border-soft);
	background: var(--sdas-brand-50);
	border-radius: 0 0 20px 20px;
}
.sdas-modal-actions .sdas-btn { margin-top: 0 !important; min-width: 132px; }

/* =====================================================================
   EMPTY STATE
   ===================================================================== */
.sdas-empty { text-align: center; padding: 44px 20px; color: var(--sdas-muted); }
.sdas-empty h3 { font-size: 16px; color: var(--sdas-ink); margin: 0 0 6px; font-family: var(--sdas-display); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 960px) {
	.sdas-dashboard { grid-template-columns: 1fr; height: auto; overflow: visible; }
	.sdas-main { height: auto; overflow: visible; }
	.sdas-sidebar { position: static; height: auto; flex-direction: column; padding: 16px; }
	.sdas-side-label { display: none; }
	.sdas-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
	.sdas-nav .sdas-tab { white-space: nowrap; padding: 9px 14px; }
	.sdas-nav .sdas-tab.active { box-shadow: inset 0 -3px 0 var(--sdas-accent); }
	.sdas-sidebar-footer { margin-top: 14px; }
	.sdas-stat-grid { grid-template-columns: repeat(2, 1fr); }
	.sdas-card-grid-2 { grid-template-columns: 1fr; }
	.sdas-topbar { padding: 16px 20px; }
	.sdas-content { padding: 22px 18px 40px; }
}
@media (max-width: 560px) {
	.sdas-form-row { grid-template-columns: 1fr; }
	.sdas-stat-grid { grid-template-columns: 1fr; }
	.sdas-user-chip span.sdas-user-name { display: none; }
	.sdas-auth-card { padding: 32px 24px; }
	.sdas-content { padding: 18px 14px 36px; }
}

/* =====================================================================
   TYPOGRAPHY ROLES + MONO
   ===================================================================== */
.sdas-topbar-title,
.sdas-section-title,
.sdas-card-box > h3,
.sdas-stat-value,
.sdas-brand-text strong,
.sdas-auth-card h2 { font-family: var(--sdas-display); }

.sdas-mono, .sdas-time {
	font-family: var(--sdas-mono);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	letter-spacing: -0.01em;
}
.sdas-topbar-sub .sdas-mono { font-size: 12px; }

/* =====================================================================
   BOOKING LIST (today's schedule / recent)
   ===================================================================== */
.sdas-booking-list { display: flex; flex-direction: column; gap: 8px; }
.sdas-booking {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	border: 1px solid var(--sdas-border); border-left: 3px solid var(--sdas-forest);
	border-radius: var(--sdas-radius-sm); padding: 11px 14px; background: #fff;
}
.sdas-booking--pending     { border-left-color: var(--sdas-amber); }
.sdas-booking--approved    { border-left-color: var(--sdas-green); }
.sdas-booking--rescheduled { border-left-color: var(--sdas-blue); }
.sdas-booking--rejected    { border-left-color: var(--sdas-red); }
.sdas-booking--cancelled   { border-left-color: #B6C6CB; }
.sdas-booking__time { font-family: var(--sdas-mono); font-size: 13px; font-weight: 600; color: var(--sdas-ink); min-width: 108px; }
.sdas-booking__who  { font-weight: 600; font-size: 14px; }
.sdas-booking__meta { font-size: 12.5px; color: var(--sdas-muted); }
.sdas-booking .sdas-spacer { margin-left: auto; }

/* =====================================================================
   TIME RAIL — slot picker
   ===================================================================== */
.sdas-slot-wrap { margin: 6px 0 4px; }
.sdas-slot-status { font-size: 13px; color: var(--sdas-muted); margin-bottom: 12px; }
.sdas-slot-status.is-off { color: var(--sdas-red); font-weight: 600; }
.sdas-slotgrid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px;
}
.sdas-slot {
	position: relative; text-align: left; cursor: pointer;
	border: 1px solid var(--sdas-border); background: #fff; border-radius: 12px;
	padding: 9px 10px 9px 15px;
	font-family: var(--sdas-mono); font-size: 13px; color: var(--sdas-ink);
	display: block; width: 100%;
	transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sdas-slot::before {
	content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
	border-radius: 0 3px 3px 0; background: var(--sdas-brand);
}
.sdas-slot small { display: block; font-family: var(--sdas-mono); font-size: 10.5px; color: var(--sdas-muted); margin-top: 2px; }
.sdas-slot:hover:not(:disabled) {
	border-color: var(--sdas-brand); background: var(--sdas-brand-50);
	transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(42,50,46,.8);
}
.sdas-slot.is-selected { background: var(--sdas-brand); color: #fff; border-color: var(--sdas-brand); }
.sdas-slot.is-selected::before { background: #fff; }
.sdas-slot.is-selected small { color: rgba(255,255,255,.8); }
.sdas-slot:disabled { cursor: not-allowed; background: var(--sdas-cream-2); color: var(--sdas-faint); border-style: dashed; }
.sdas-slot--booked::before { background: var(--sdas-red); opacity: .5; }
.sdas-slot--past::before   { background: var(--sdas-neutral); opacity: .5; }
.sdas-slot--booked, .sdas-slot--past { opacity: .55; }
.sdas-slot-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--sdas-muted); margin-top: 14px; }
.sdas-slot-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* =====================================================================
   TIMELINE + DETAIL LIST
   ===================================================================== */
.sdas-timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--sdas-border); }
.sdas-timeline li { position: relative; padding: 0 0 16px 18px; }
.sdas-timeline li:last-child { padding-bottom: 0; }
.sdas-timeline li::before {
	content: ""; position: absolute; left: -27px; top: 3px; width: 11px; height: 11px;
	border-radius: 50%; background: #fff; border: 2px solid var(--sdas-brand);
}
.sdas-timeline b { font-size: 13.5px; color: var(--sdas-ink); }
.sdas-timeline time { display: block; font-family: var(--sdas-mono); font-size: 11.5px; color: var(--sdas-muted); margin-top: 1px; }
.sdas-timeline p { margin: 3px 0 0; font-size: 13px; color: var(--sdas-muted); }

.sdas-detail-list { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 9px 14px; font-size: 14px; }
.sdas-detail-list dt { color: var(--sdas-muted); font-size: 13px; }
.sdas-detail-list dd { margin: 0; font-weight: 500; color: var(--sdas-ink); }
.sdas-modal-content .sdas-detail-list { margin-bottom: 6px; }

/* =====================================================================
   TOAST
   ===================================================================== */
.sdas-toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 100001; display: flex; flex-direction: column; gap: 10px; }
.sdas-toast {
	display: flex; align-items: center; gap: 10px;
	background: var(--sdas-ink); color: #fff;
	padding: 12px 16px; border-radius: var(--sdas-radius); font-size: 14px; font-weight: 500;
	box-shadow: var(--sdas-shadow-lg);
	animation: sdasToastIn .25s ease;
	max-width: 340px;
}
.sdas-toast.is-error { background: var(--sdas-brand-900); }
.sdas-toast.is-success { background: var(--sdas-brand-700); }
.sdas-toast svg { width: 18px; height: 18px; flex: none; }
@keyframes sdasToastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sdasToastOut { to { opacity: 0; transform: translateY(12px); } }

/* =====================================================================
   FULL-WIDTH CANVAS (dashboards on the plugin's own template)
   ===================================================================== */
html.sdas-app-html { margin-top: 0 !important; }
body.sdas-app {
	margin: 0;
	padding: 0;
	background: var(--sdas-cream, #F4F6F8);
	font-family: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.sdas-app #wpadminbar { display: none !important; }

.sdas-dashboard, .sdas-dashboard *, .sdas-dashboard *::before, .sdas-dashboard *::after { box-sizing: border-box; }
.sdas-dashboard a { text-decoration: none; box-shadow: none; }
.sdas-dashboard a:hover { text-decoration: none; }
.sdas-dashboard button { font-family: inherit; }
.sdas-dashboard img { max-width: none; }
.sdas-content table { margin: 0; }
.sdas-content ul, .sdas-content ol { margin: 0; padding: 0; }
.sdas-main { overflow-x: hidden; }

body:not(.sdas-app) .sdas-dashboard {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* =====================================================================
   BESPOKE CALENDAR (month grid + hourly day view)
   ===================================================================== */
.sdas-caltabs { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.sdas-seg {
	display: inline-flex; background: #fff; border: 1px solid var(--sdas-border);
	border-radius: 999px; padding: 4px; box-shadow: var(--sdas-shadow-sm);
}
.sdas-seg-btn {
	padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
	color: var(--sdas-muted); text-decoration: none;
}
.sdas-seg-btn:hover { color: var(--sdas-brand-700); }
.sdas-seg-btn.is-active { background: var(--sdas-brand); color: #fff; }

.sdas-cal-card { padding: 16px 18px; }
.sdas-cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sdas-cal-head h3 { margin: 0; font-size: 18px; font-family: var(--sdas-display); border: 0; padding: 0; }
.sdas-cal-count { margin-left: auto; color: var(--sdas-muted); font-size: 12.5px; }

.sdas-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sdas-cal th {
	padding: 9px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--sdas-muted); border-bottom: 1px solid var(--sdas-border); font-weight: 700; text-align: center;
}
.sdas-cal td { border: 1px solid var(--sdas-border-soft); vertical-align: top; height: 112px; padding: 0; }
.sdas-cal-day { display: block; height: 100%; padding: 7px 8px; text-decoration: none; color: inherit; min-height: 112px; }
.sdas-cal-day:hover { background: var(--sdas-brand-50); }
.sdas-cal-num { font-family: var(--sdas-mono); font-size: 12.5px; color: var(--sdas-ink-2, var(--sdas-muted)); font-weight: 600; }
.sdas-cal-today .sdas-cal-num { background: var(--sdas-ink); color: #fff; border-radius: 5px; padding: 1px 6px; }
.sdas-cal-off { background: repeating-linear-gradient(135deg, #F6F9FA 0 6px, #EFF4F5 6px 12px); }
.sdas-cal-out { background: #FAFBFC; }
.sdas-cal-offtag { display: block; font-size: 10px; color: var(--sdas-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.sdas-cal-chip {
	display: block; margin-top: 4px; font-size: 11px; padding: 2px 6px; border-radius: 5px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	border-left: 3px solid var(--sdas-brand); background: var(--sdas-brand-100); color: var(--sdas-brand-800);
}
.sdas-cal-chip .sdas-mono { font-size: 10.5px; }
.sdas-cal-chip--pending     { border-color: var(--sdas-amber); background: var(--sdas-amber-bg); color: var(--sdas-amber); }
.sdas-cal-chip--approved    { border-color: var(--sdas-green); background: var(--sdas-green-bg); color: var(--sdas-green); }
.sdas-cal-chip--rescheduled { border-color: var(--sdas-blue);  background: var(--sdas-blue-bg);  color: var(--sdas-blue); }
.sdas-cal-chip--busy        { border-color: var(--sdas-neutral); background: #EEF1F3; color: #6D7A82; }
.sdas-cal-more { display: block; font-size: 11px; color: var(--sdas-muted); margin-top: 3px; }

.sdas-hours { border-top: 1px solid var(--sdas-border-soft); }
.sdas-hour { display: grid; grid-template-columns: 90px minmax(0,1fr); border-bottom: 1px solid var(--sdas-border-soft); }
.sdas-hour-label {
	font-size: 12px; color: var(--sdas-muted); padding: 12px 12px;
	border-right: 1px solid var(--sdas-border-soft); background: var(--sdas-cream-2);
}
.sdas-hour-body { padding: 9px 12px; display: flex; flex-direction: column; gap: 7px; min-height: 54px; }
.sdas-hour--empty .sdas-hour-body::after { content: "—"; color: var(--sdas-faint); font-size: 12px; }

@media (max-width: 700px) {
	.sdas-cal td { height: 78px; }
	.sdas-cal-day { min-height: 78px; }
	.sdas-cal-chip { font-size: 9.5px; }
	.sdas-hour { grid-template-columns: 66px minmax(0,1fr); }
	.sdas-booking { gap: 8px; }
	.sdas-booking .sdas-actions { width: 100%; }
}

/* =====================================================================
   v2.2 ADDITIONS — login redesign · services / payments · responsive cards
   ===================================================================== */

/* ---- Login split: full height + healthcare-image copy overlay ---------- */
.sdas-auth-wrap.sdas-auth-split {
	min-height: 100vh;                 /* true full-height photo column */
}
.sdas-auth-visual::after {
	/* darker, more even scrim so the overlay copy stays readable on any photo */
	background: linear-gradient(180deg, rgba(8,42,54,.34) 0%, rgba(8,42,54,.10) 40%, rgba(8,42,54,.72) 100%);
}
.sdas-auth-visual-copy {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
	padding: 40px 44px 46px;
	color: #fff;
	max-width: 560px;
}
.sdas-auth-visual-copy h2 {
	margin: 0 0 12px;
	font-family: var(--sdas-display);
	font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 18px rgba(6,32,42,.45);
}
.sdas-auth-visual-copy p {
	margin: 0 0 18px;
	font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.92);
	max-width: 440px;
	text-shadow: 0 1px 10px rgba(6,32,42,.4);
}
.sdas-auth-visual-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sdas-auth-visual-points li {
	position: relative; padding-left: 28px;
	font-size: 14px; font-weight: 500; color: rgba(255,255,255,.95);
	text-shadow: 0 1px 10px rgba(6,32,42,.4);
}
.sdas-auth-visual-points li::before {
	content: ""; position: absolute; left: 0; top: 1px;
	width: 18px; height: 18px; border-radius: 50%;
	background: rgba(255,255,255,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
	border: 1px solid rgba(255,255,255,.35);
}
/* Right column: vertically center the card within the full-height panel */
.sdas-auth-split .sdas-auth-card { align-self: center; }

@media (max-width: 860px) {
	.sdas-auth-wrap.sdas-auth-split { min-height: 0; }
	.sdas-auth-visual { min-height: 300px; }
	.sdas-auth-visual-copy { padding: 26px 24px 28px; max-width: none; }
	.sdas-auth-visual-copy h2 { font-size: 23px; }
	.sdas-auth-visual-copy p { font-size: 14px; margin-bottom: 14px; }
}
@media (max-width: 520px) {
	.sdas-auth-visual { min-height: 240px; }
	.sdas-auth-visual-points { display: none; }   /* keep the mobile hero compact */
}

/* ---- Horizontal-scroll wrapper: keeps wide tables inside their cards ---- */
.sdas-table-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--sdas-radius);
}
.sdas-table-scroll .sdas-table { min-width: 640px; }   /* let it scroll instead of squashing */
.sdas-table-scroll::-webkit-scrollbar { height: 8px; }

/* Long values (emails, references, service names) wrap instead of overflowing */
.sdas-table td, .sdas-table th { overflow-wrap: anywhere; }

/* ---- Payment cell helpers ---- */
.sdas-pay-cell { white-space: nowrap; }
.sdas-pay-cell .sdas-btn { margin-top: 4px; }
.sdas-pay-amount { font-family: var(--sdas-mono); font-weight: 600; font-size: 13px; color: var(--sdas-ink); }
.sdas-pay-await { font-size: 12.5px; }

/* =====================================================================
   RESPONSIVE / CONTAINMENT HARDENING FOR DASHBOARD CARDS
   Ensures every card stays within its column, aligns cleanly and never
   pushes horizontal overflow on smaller screens.
   ===================================================================== */
.sdas-dashboard { max-width: 100%; overflow-x: hidden; }
.sdas-main, .sdas-content { min-width: 0; max-width: 100%; }
.sdas-content > * { min-width: 0; }
.sdas-stat, .sdas-card-box { min-width: 0; max-width: 100%; }
.sdas-card-box { overflow-wrap: anywhere; }
/* grid children must be allowed to shrink or they force overflow */
.sdas-stat-grid > *, .sdas-card-grid-2 > * { min-width: 0; }
/* stat numbers never spill their card */
.sdas-stat-value { overflow-wrap: anywhere; }
/* action button clusters wrap neatly and stay left-aligned */
.sdas-actions, .sdas-panel-header-row, .sdas-patient-select-toolbar { min-width: 0; }
.sdas-panel-header-row .sdas-btn, .sdas-actions .sdas-btn { flex: 0 0 auto; }

/* Tighten the three-across stat grid a touch earlier so cards keep their
   proportions on common laptop widths before the 960px stack. */
@media (max-width: 1180px) {
	.sdas-stat-grid { gap: 14px; }
	.sdas-stat { padding: 18px; }
	.sdas-stat-value { font-size: 28px; }
}

@media (max-width: 960px) {
	/* the card header's negative side-margins must match the card padding */
	.sdas-card-box { padding: 22px 20px; }
	.sdas-card-box > h3 { margin: -22px -20px 18px; padding: 15px 18px 14px; }
	.sdas-modal-content { padding: 22px 22px 24px; }
	.sdas-modal-content h2 { margin: -22px -22px 18px; padding: 18px 22px 16px; }
	.sdas-modal-actions { margin: 22px -22px -24px; padding: 16px 22px 20px; }
}

@media (max-width: 560px) {
	.sdas-card-box { padding: 18px 16px; border-radius: var(--sdas-radius-sm); }
	.sdas-card-box > h3 { margin: -18px -16px 16px; padding: 14px 16px 13px; }
	.sdas-stat { padding: 16px; border-radius: var(--sdas-radius-sm); }
	.sdas-stat-value { font-size: 26px; }
	/* stack the stat top + text so nothing crowds on the narrowest screens */
	.sdas-panel-header-row { gap: 10px; }
	.sdas-panel-header-row .sdas-btn { width: 100%; justify-content: center; }
	.sdas-table-scroll .sdas-table { min-width: 560px; }
	.sdas-modal-actions { flex-direction: column; }
	.sdas-modal-actions .sdas-btn { width: 100%; }
}

/* ============================================================================
   v2.3 — PREMIUM ENTERPRISE REDESIGN
   Appended last so it authoritatively overrides earlier rules and any theme
   bleed. Covers: refined tokens · fixed app shell (only content scrolls) ·
   theme-proof button system with icons + states · elevated cards, tables,
   forms, badges, stats · anchor resets · smooth motion · responsiveness.
   ========================================================================== */

/* ---- Refined design tokens (dashboard + modals) ------------------------- */
.sdas-dashboard,
.sdas-modal {
	--sdas-radius:      16px;
	--sdas-radius-sm:   11px;
	--sdas-radius-xs:   9px;
	--sdas-border:      #E5EDF1;
	--sdas-border-soft: #EEF3F6;

	--sdas-shadow-sm: 0 1px 2px rgba(16,42,54,.05), 0 4px 12px -8px rgba(16,42,54,.22);
	--sdas-shadow:    0 1px 3px rgba(16,42,54,.06), 0 12px 28px -18px rgba(16,42,54,.30);
	--sdas-shadow-md: 0 2px 8px rgba(16,42,54,.07), 0 20px 44px -22px rgba(16,42,54,.34);
	--sdas-shadow-lg: 0 30px 70px -24px rgba(14,42,51,.46);
	--sdas-focus:     0 0 0 3px rgba(47,128,166,.30);

	/* semantic status palette — clear meaning, still calm/enterprise */
	--sdas-amber:  #B45309;  --sdas-amber-bg:  #FBEEDD;
	--sdas-green:  #15803D;  --sdas-green-bg:  #E4F5EA;
	--sdas-blue:   #2563EB;  --sdas-blue-bg:   #E8EEFE;
	--sdas-red:    #B91C1C;  --sdas-red-bg:    #FCEBEB;
	--sdas-neutral:#8A97A0;
	--sdas-accent: #2F80A6;
}

/* ============================================================================
   APP SHELL — fixed sidebar, only the content column scrolls (desktop)
   ========================================================================== */
@media (min-width: 961px) {
	html.sdas-app-html, body.sdas-app { height: 100%; overflow: hidden; }
	body.sdas-app .sdas-dashboard { height: 100vh; min-height: 0; overflow: hidden; }
	body.sdas-app .sdas-sidebar {
		position: sticky; top: 0; height: 100vh;
		overflow-y: auto; overscroll-behavior: contain;
	}
	body.sdas-app .sdas-main {
		height: 100vh; min-height: 0;
		overflow-y: auto; overscroll-behavior: contain;
		scroll-behavior: smooth;
	}
	/* refined scrollbar for the content column */
	body.sdas-app .sdas-main::-webkit-scrollbar { width: 11px; }
	body.sdas-app .sdas-main::-webkit-scrollbar-thumb { background: #CBD9DF; border: 3px solid transparent; background-clip: content-box; border-radius: 99px; }
	body.sdas-app .sdas-main::-webkit-scrollbar-thumb:hover { background: #A9BDC6; background-clip: content-box; }

	/* ---- Fallback: when the dashboard renders inside the theme (NOT on the
	   plugin canvas, so body has no .sdas-app class), keep the left sidebar
	   pinned to the viewport while only the right content column scrolls with
	   the page. This is what makes the hospital dashboard behave like the
	   doctor one even if its page wasn't detected as the bare shortcode. ---- */
	body:not(.sdas-app) .sdas-dashboard { align-items: start; }
	body:not(.sdas-app) .sdas-dashboard .sdas-sidebar {
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ============================================================================
   SIDEBAR — premium refinement
   ========================================================================== */
.sdas-sidebar {
	padding: 22px 16px 20px;
	box-shadow: 1px 0 0 rgba(0,0,0,.04), 8px 0 28px -22px rgba(6,42,54,.6);
}
.sdas-brand { padding: 2px 8px 20px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.10); }
.sdas-brand-logo { border-radius: 12px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.7); }
.sdas-nav { gap: 3px; }
.sdas-nav .sdas-tab {
	position: relative;
	padding: 11px 13px;
	border-radius: 11px;
	font-size: 14px;
	color: rgba(255,255,255,.82);
	transition: background .16s ease, color .16s ease, transform .16s ease, padding-left .16s ease;
}
.sdas-nav .sdas-tab svg { transition: transform .16s ease, opacity .16s ease; opacity: .85; }
.sdas-nav .sdas-tab:hover { background: rgba(255,255,255,.12); color: #fff; transform: none; padding-left: 16px; }
.sdas-nav .sdas-tab:hover svg { opacity: 1; }
.sdas-nav .sdas-tab.active {
	background: #fff;
	color: var(--sdas-brand-900);
	box-shadow: 0 8px 20px -10px rgba(6,42,54,.55);
}
.sdas-nav .sdas-tab.active::before {
	content: ""; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
	width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: #fff;
}
.sdas-nav .sdas-tab.active svg { opacity: 1; stroke: var(--sdas-brand); }
.sdas-sidebar-footer .sdas-btn { border-radius: 11px; justify-content: flex-start; }

/* ============================================================================
   TOPBAR
   ========================================================================== */
.sdas-topbar {
	padding: 16px 30px;
	background: rgba(255,255,255,.82);
	border-bottom: 1px solid var(--sdas-border);
}
.sdas-topbar-title { font-size: 19px; font-weight: 700; }
.sdas-user-chip { box-shadow: var(--sdas-shadow-sm); transition: box-shadow .18s ease, transform .18s ease; }
.sdas-user-chip:hover { box-shadow: var(--sdas-shadow); transform: translateY(-1px); }

/* ============================================================================
   BUTTONS — theme-proof, consistent, premium (icons + full state set)
   Everything here is deliberately high-specificity + !important so no parent
   theme can strip our controls back to plain text links again.
   ========================================================================== */
.sdas-dashboard a.sdas-btn,  .sdas-dashboard button.sdas-btn,
.sdas-modal a.sdas-btn,      .sdas-modal button.sdas-btn,
.sdas-auth-wrap a.sdas-btn,  .sdas-auth-wrap button.sdas-btn,
.sdas-dashboard .sdas-btn,   .sdas-modal .sdas-btn,   .sdas-auth-wrap .sdas-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	box-sizing: border-box !important;
	font-family: var(--sdas-display) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: .005em !important;
	padding: 10px 16px !important;
	margin: 0;
	border: 1px solid transparent !important;
	border-radius: 11px !important;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	color: var(--sdas-brand-700);
	background: #fff;
	box-shadow: none;
	transition: background .18s ease, border-color .16s ease, color .16s ease, box-shadow .2s ease, transform .12s ease;
}
.sdas-form .sdas-btn-primary { width: 100%; padding: 13px 20px !important; margin-top: 24px; }
.sdas-btn:active { transform: translateY(0) scale(.985); }
.sdas-btn:focus-visible { outline: none !important; box-shadow: var(--sdas-focus) !important; }
.sdas-btn:disabled,
.sdas-btn[disabled] { opacity: .5 !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; }
.sdas-btn-small { padding: 7px 12px !important; font-size: 12.5px !important; border-radius: 9px !important; gap: 5px !important; }

/* Primary — refined charcoal-emerald gradient, always crisp white label */
.sdas-dashboard .sdas-btn-primary, .sdas-modal .sdas-btn-primary, .sdas-auth-wrap .sdas-btn-primary,
.sdas-dashboard button.sdas-btn-primary, .sdas-dashboard a.sdas-btn-primary {
	background: linear-gradient(145deg, #333D38 0%, var(--sdas-brand) 55%, var(--sdas-brand-700) 100%) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 8px 18px -9px rgba(20,26,22,.85), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.sdas-dashboard .sdas-btn-primary:hover, .sdas-modal .sdas-btn-primary:hover, .sdas-auth-wrap .sdas-btn-primary:hover {
	background: linear-gradient(145deg, var(--sdas-brand) 0%, var(--sdas-brand-700) 100%) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -12px rgba(20,26,22,.95), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.sdas-dashboard .sdas-btn-primary:active, .sdas-modal .sdas-btn-primary:active { transform: translateY(0) scale(.985); }

/* Outline / secondary — white surface, brand label, fills brand on hover */
.sdas-dashboard .sdas-btn-outline, .sdas-modal .sdas-btn-outline, .sdas-auth-wrap .sdas-btn-outline {
	background: #fff !important;
	border-color: var(--sdas-border) !important;
	color: var(--sdas-brand-700) !important;
	box-shadow: 0 1px 2px rgba(16,42,54,.04) !important;
}
.sdas-dashboard .sdas-btn-outline:hover, .sdas-modal .sdas-btn-outline:hover, .sdas-auth-wrap .sdas-btn-outline:hover {
	background: var(--sdas-brand) !important;
	border-color: var(--sdas-brand) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 22px -12px rgba(20,26,22,.7) !important;
}

/* Approve — emerald */
.sdas-dashboard .sdas-btn-approve, .sdas-modal .sdas-btn-approve {
	background: var(--sdas-green-bg) !important; color: var(--sdas-green) !important; border-color: transparent !important;
}
.sdas-dashboard .sdas-btn-approve:hover, .sdas-modal .sdas-btn-approve:hover {
	background: var(--sdas-green) !important; color: #fff !important; transform: translateY(-1px);
	box-shadow: 0 12px 22px -12px rgba(21,128,61,.6) !important;
}

/* Reject / Danger — red */
.sdas-dashboard .sdas-btn-reject, .sdas-modal .sdas-btn-reject,
.sdas-dashboard .sdas-btn-danger, .sdas-modal .sdas-btn-danger {
	background: var(--sdas-red-bg) !important; color: var(--sdas-red) !important; border-color: transparent !important;
}
.sdas-dashboard .sdas-btn-reject:hover, .sdas-modal .sdas-btn-reject:hover,
.sdas-dashboard .sdas-btn-danger:hover, .sdas-modal .sdas-btn-danger:hover {
	background: var(--sdas-red) !important; color: #fff !important; transform: translateY(-1px);
	box-shadow: 0 12px 22px -12px rgba(185,28,28,.55) !important;
}

/* Neutral */
.sdas-dashboard .sdas-btn-neutral, .sdas-modal .sdas-btn-neutral {
	background: #fff !important; border-color: var(--sdas-border) !important; color: var(--sdas-brand-700) !important;
}
.sdas-dashboard .sdas-btn-neutral:hover, .sdas-modal .sdas-btn-neutral:hover {
	background: var(--sdas-brand) !important; border-color: var(--sdas-brand) !important; color: #fff !important; transform: translateY(-1px);
}

/* Sidebar footer + logout keep their translucent treatment */
.sdas-sidebar-footer .sdas-btn { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; }
.sdas-sidebar-footer .sdas-btn:hover { background: rgba(255,255,255,.22) !important; transform: none; }

/* Loading state keeps working over the hardened rules */
.sdas-btn.is-loading { color: transparent !important; pointer-events: none; }

/* ---- Icon layer: inject a leading glyph on every action button, purely in
       CSS (currentColor mask) so it inherits the button's label colour and
       hover state, with zero markup changes. ---- */
.sdas-dashboard .sdas-edit-patient::before,   .sdas-dashboard .sdas-edit-service::before,
.sdas-dashboard .sdas-delete-patient::before, .sdas-dashboard .sdas-delete-service::before,
.sdas-dashboard .sdas-approve-appointment::before, .sdas-dashboard .sdas-reject-appointment::before,
.sdas-dashboard .sdas-reschedule-appointment::before, .sdas-dashboard .sdas-cancel-appointment::before,
.sdas-dashboard .sdas-make-payment::before,
.sdas-dashboard .sdas-approve-registration::before, .sdas-dashboard .sdas-reject-registration::before,
.sdas-dashboard .sdas-toggle-patient-completed::before,
.sdas-dashboard #sdas-add-patient-btn::before, .sdas-dashboard #sdas-add-service-btn::before,
.sdas-modal .sdas-modal-actions .sdas-btn-primary::before {
	content: ""; flex: none; width: 14px; height: 14px; display: inline-block;
	background: currentColor;
	-webkit-mask: center / contain no-repeat var(--sdas-btn-icon);
	        mask: center / contain no-repeat var(--sdas-btn-icon);
}
.sdas-dashboard #sdas-add-patient-btn, .sdas-dashboard #sdas-add-service-btn { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.sdas-modal .sdas-modal-actions .sdas-btn-primary { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-edit-patient, .sdas-dashboard .sdas-edit-service { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-delete-patient, .sdas-dashboard .sdas-delete-service { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-approve-appointment, .sdas-dashboard .sdas-approve-registration { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-reject-appointment, .sdas-dashboard .sdas-reject-registration { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-cancel-appointment { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-reschedule-appointment { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M3.05 13A9 9 0 1 0 6 5.3L3 8'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-make-payment { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-toggle-patient-completed[data-completed="0"] { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.sdas-dashboard .sdas-toggle-patient-completed[data-completed="1"] { --sdas-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M3.51 13a9 9 0 1 0 2.13-6.36L3 9'/%3E%3C/svg%3E"); }

/* ============================================================================
   ANCHORS — stop theme link colour/underline bleeding into the dashboard
   ========================================================================== */
.sdas-dashboard a:not(.sdas-btn):not(.sdas-role-tab) { color: var(--sdas-accent); text-decoration: none; box-shadow: none; }
.sdas-dashboard a:not(.sdas-btn):hover { color: var(--sdas-brand-700); }

/* ============================================================================
   CARDS
   ========================================================================== */
.sdas-card-box {
	border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius);
	box-shadow: var(--sdas-shadow);
	transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.sdas-card-box:hover { box-shadow: var(--sdas-shadow-md); border-color: #DBE6EB; transform: translateY(-1px); }
.sdas-card-box > h3 {
	font-size: 15px; font-weight: 700; letter-spacing: -.01em;
	background: linear-gradient(180deg, #fff 0%, #F7FAFB 100%);
	border-bottom: 1px solid var(--sdas-border-soft);
}
.sdas-section-title { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.sdas-panel-header-row h3 { font-size: 16px; }

/* ============================================================================
   STAT CARDS
   ========================================================================== */
.sdas-stat {
	background: linear-gradient(168deg, #fff 0%, #F6FAFB 100%);
	border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius);
	box-shadow: var(--sdas-shadow-sm);
}
.sdas-stat:hover { box-shadow: var(--sdas-shadow-md); transform: translateY(-3px); }
.sdas-stat-icon { border-radius: 12px; }
.sdas-stat-icon.is-amber { background: var(--sdas-amber-bg); } .sdas-stat-icon.is-amber svg { stroke: var(--sdas-amber); }
.sdas-stat-icon.is-green { background: var(--sdas-green-bg); } .sdas-stat-icon.is-green svg { stroke: var(--sdas-green); }
.sdas-stat-icon.is-blue  { background: var(--sdas-blue-bg); }  .sdas-stat-icon.is-blue  svg { stroke: var(--sdas-blue); }
.sdas-stat-value { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.sdas-stat-label { font-size: 10.5px; letter-spacing: .1em; }

/* ============================================================================
   TABLES
   ========================================================================== */
.sdas-table { border: 1px solid var(--sdas-border); border-radius: var(--sdas-radius); box-shadow: var(--sdas-shadow-sm); }
.sdas-table th {
	background: linear-gradient(180deg, #F7FAFB, #fff);
	font-size: 10.5px; letter-spacing: .1em; color: var(--sdas-brand-800); font-weight: 700;
	border-bottom: 1px solid var(--sdas-border);
	padding: 13px 16px;
}
.sdas-table td { padding: 14px 16px; border-bottom: 1px solid var(--sdas-border-soft); }
.sdas-table tbody tr { transition: background .14s ease; }
.sdas-table tbody tr:hover { background: #F6FAFB; }
.sdas-table .sdas-actions { gap: 6px; }

/* ============================================================================
   BADGES — semantic, hardened against theme overrides
   ========================================================================== */
.sdas-dashboard .sdas-badge, .sdas-modal .sdas-badge {
	display: inline-flex !important; align-items: center; gap: 6px;
	padding: 4px 11px !important; border-radius: 999px !important;
	font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .04em;
	text-transform: uppercase; line-height: 1.4; border: 1px solid transparent !important;
}
.sdas-dashboard .sdas-badge-pending, .sdas-modal .sdas-badge-pending         { background: var(--sdas-amber-bg) !important; color: var(--sdas-amber) !important; }
.sdas-dashboard .sdas-badge-approved, .sdas-modal .sdas-badge-approved       { background: var(--sdas-green-bg) !important; color: var(--sdas-green) !important; }
.sdas-dashboard .sdas-badge-rescheduled, .sdas-modal .sdas-badge-rescheduled { background: var(--sdas-blue-bg) !important;  color: var(--sdas-blue) !important; }
.sdas-dashboard .sdas-badge-rejected, .sdas-modal .sdas-badge-rejected       { background: var(--sdas-red-bg) !important;   color: var(--sdas-red) !important; }
.sdas-dashboard .sdas-badge-cancelled, .sdas-modal .sdas-badge-cancelled     { background: #EEF2F4 !important; color: #5F7B83 !important; }

/* ============================================================================
   FORMS
   ========================================================================== */
.sdas-form label { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; margin: 16px 0 7px; }
.sdas-form input[type=text], .sdas-form input[type=email], .sdas-form input[type=tel],
.sdas-form input[type=password], .sdas-form input[type=number], .sdas-form input[type=date],
.sdas-form input[type=time], .sdas-form select, .sdas-form textarea {
	padding: 11px 13px; border-radius: var(--sdas-radius-sm); border: 1px solid var(--sdas-border);
	background: #FCFEFE; font-size: 14.5px;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.sdas-form input:focus, .sdas-form select:focus, .sdas-form textarea:focus {
	background: #fff; border-color: var(--sdas-accent); box-shadow: var(--sdas-focus);
}
.sdas-patient-check-row input[type=checkbox], .sdas-avail-check, .sdas-checkbox-label input { accent-color: var(--sdas-brand); }

/* ============================================================================
   FILTER PILLS / SEGMENTED
   ========================================================================== */
.sdas-filter-pills, .sdas-seg { box-shadow: var(--sdas-shadow-sm); border-color: var(--sdas-border); }
.sdas-filter-pills a.active, .sdas-seg-btn.is-active { background: var(--sdas-brand); color: #fff; }

/* ============================================================================
   MODALS
   ========================================================================== */
.sdas-modal-content { border-radius: 18px; box-shadow: var(--sdas-shadow-lg); border-color: var(--sdas-border); }
.sdas-modal-content h2 { font-size: 19px; background: linear-gradient(180deg, #fff, #F7FAFB); }
.sdas-modal-actions { background: #F7FAFB; border-top: 1px solid var(--sdas-border-soft); }

/* ============================================================================
   MOTION — subtle, professional
   ========================================================================== */
@keyframes sdasPanelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sdas-tab-panel.active { animation: sdasPanelIn .28s cubic-bezier(.22,.7,.3,1); }
.sdas-appt-patient-row { transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.sdas-appt-patient-row:hover { border-color: var(--sdas-border); transform: translateX(1px); }
@media (prefers-reduced-motion: reduce) {
	.sdas-tab-panel.active, .sdas-btn, .sdas-card-box, .sdas-stat, .sdas-nav .sdas-tab { animation: none !important; transition: none !important; }
}

/* ============================================================================
   RESPONSIVE — mobile sidebar becomes a clean top bar, content flows normally
   ========================================================================== */
@media (max-width: 960px) {
	.sdas-sidebar { padding: 14px 14px 12px; box-shadow: 0 8px 22px -18px rgba(6,42,54,.6); }
	.sdas-brand { border-bottom: none; padding-bottom: 12px; }
	.sdas-nav .sdas-tab { border-radius: 10px; padding: 9px 13px; }
	.sdas-nav .sdas-tab:hover { padding-left: 13px; }
	.sdas-nav .sdas-tab.active::before { display: none; }
	.sdas-nav .sdas-tab.active { box-shadow: inset 0 -3px 0 var(--sdas-accent); border-radius: 10px 10px 0 0; }
	.sdas-topbar { padding: 14px 18px; }
}
@media (max-width: 560px) {
	.sdas-btn-small { padding: 8px 11px !important; }
	.sdas-actions { width: 100%; }
	.sdas-actions .sdas-btn { flex: 1 1 auto; }
}

/* =====================================================================
   v3.0.0 additions — grouped appointments, decisions, documents, medical
   ===================================================================== */

/* Blue "Approved" mini badge (distinct from green "Completed"). */
.sdas-badge-blue { background: var(--sdas-blue-bg); color: var(--sdas-blue); }

/* Wider modal for patient + documents forms. */
.sdas-modal-lg { width: 680px; }

/* Section divider inside forms/modals. */
.sdas-form-section {
	margin: 22px 0 4px; padding-top: 14px;
	font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--sdas-brand-700); border-top: 1px solid var(--sdas-border-soft);
}
.sdas-modal-content h4.sdas-form-section:first-of-type { border-top: none; padding-top: 0; margin-top: 6px; }

/* ---- Booking: patient select toolbar ---- */
.sdas-patient-select-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 8px; }
.sdas-patient-select-toolbar label { margin: 0; }

/* ---- Payment cell ---- */
.sdas-pay-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sdas-pay-amount { font-weight: 700; color: var(--sdas-ink); font-size: 13px; }
.sdas-pay-cell { min-width: 180px; }

/* ---- Overview mini groups (doctor) ---- */
.sdas-mini-group-list { display: flex; flex-direction: column; gap: 8px; }
.sdas-mini-group {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; background: var(--sdas-cream-2);
	border: 1px solid var(--sdas-border-soft); border-radius: var(--sdas-radius-sm);
}
.sdas-mini-group .sdas-spacer { flex: 1 1 auto; }
.sdas-mini-group small { font-size: 12px; }

/* ---- Grouped appointments (doctor) ---- */
.sdas-appt-groups { display: flex; flex-direction: column; gap: 14px; }
.sdas-appt-group {
	background: #fff; border: 1px solid var(--sdas-border);
	border-radius: var(--sdas-radius); overflow: hidden;
	box-shadow: var(--sdas-shadow-sm);
}
.sdas-appt-group-head {
	display: flex; align-items: center; gap: 14px; width: 100%;
	padding: 16px 18px; background: none; border: none; cursor: pointer;
	text-align: left; font: inherit; color: var(--sdas-ink);
	transition: background .16s ease;
}
.sdas-appt-group-head:hover { background: var(--sdas-brand-50); }
.sdas-appt-group-caret {
	flex: none; width: 10px; height: 10px; border-right: 2px solid var(--sdas-muted);
	border-bottom: 2px solid var(--sdas-muted); transform: rotate(-45deg);
	transition: transform .18s ease; margin-right: 2px;
}
.sdas-appt-group.is-open .sdas-appt-group-caret { transform: rotate(45deg); }
.sdas-appt-group-hospital { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sdas-appt-group-hospital strong { font-size: 15px; font-weight: 650; color: var(--sdas-ink); font-family: var(--sdas-display); }
.sdas-appt-group-hospital small { font-size: 12.5px; color: var(--sdas-muted); }
.sdas-appt-group-counts { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.sdas-appt-group-body { padding: 4px 18px 18px; border-top: 1px solid var(--sdas-border-soft); display: flex; flex-direction: column; gap: 14px; }

.sdas-appt-slot { padding-top: 12px; }
.sdas-appt-slot-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sdas-appt-slot-label { font-weight: 650; font-size: 13.5px; color: var(--sdas-brand-800); }
.sdas-slot-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.sdas-sitting-box { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sdas-sitting-list { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sdas-sitting-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.sdas-sitting-date { color: var(--sdas-muted); min-width: 92px; }
.sdas-sitting-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.sdas-sitting-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sdas-sitting-amount { width: 110px; padding: 6px 8px; font-size: 13px; border: 1px solid var(--sdas-border); border-radius: var(--sdas-radius-sm); }
.sdas-patient-status { padding: 5px 8px; font-size: 12.5px; border: 1px solid var(--sdas-border); border-radius: var(--sdas-radius-sm); background: #fff; }
.sdas-decide2 { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sdas-decision-note { font-size: 12px; margin-top: 4px; padding: 6px 9px; border-radius: var(--sdas-radius-sm); line-height: 1.45; }
.sdas-decision-note-reject { background: #fdecec; color: #a12b2b; }
.sdas-decision-note-info { background: #fff6e6; color: #8a5a00; }
.sdas-chip-note { display: block; font-size: 11.5px; color: #8a5a00; margin-top: 3px; }
#sdas-session-duration { width: 100%; }
.sdas-appt-patient-list { display: flex; flex-direction: column; gap: 8px; }
.sdas-appt-patient-row { align-items: flex-start; }
.sdas-appt-patient-action { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

.sdas-appt-group-foot {
	display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
	padding: 14px 18px; border-top: 1px solid var(--sdas-border-soft); background: var(--sdas-cream);
}

/* ---- Approve / Reject decision toggle ---- */
.sdas-decide { display: inline-flex; border: 1px solid var(--sdas-border); border-radius: var(--sdas-radius-sm); overflow: hidden; }
.sdas-decide-btn {
	background: #fff; border: none; padding: 7px 15px; font-size: 12.5px; font-weight: 650;
	cursor: pointer; color: var(--sdas-muted); transition: background .15s ease, color .15s ease;
}
.sdas-decide-btn + .sdas-decide-btn { border-left: 1px solid var(--sdas-border); }
.sdas-decide-approve:hover { background: var(--sdas-green-bg); color: var(--sdas-green); }
.sdas-decide-reject:hover { background: var(--sdas-red-bg); color: var(--sdas-red); }
.sdas-decide-btn.is-active.sdas-decide-approve { background: var(--sdas-green); color: #fff; }
.sdas-decide-btn.is-active.sdas-decide-reject { background: var(--sdas-red); color: #fff; }
.sdas-appt-patient-row.is-approved { border-color: var(--sdas-green); background: var(--sdas-green-bg); }
.sdas-appt-patient-row.is-rejected { border-color: var(--sdas-red); background: var(--sdas-red-bg); }

/* ---- Medical details ---- */
.sdas-medical-details { margin-top: 8px; }
.sdas-medical-details > summary {
	cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--sdas-brand-700);
	list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 0;
}
.sdas-medical-details > summary::-webkit-details-marker { display: none; }
.sdas-medical-details > summary::before { content: "＋"; font-weight: 700; }
.sdas-medical-details[open] > summary::before { content: "－"; }
.sdas-medical-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px;
	margin: 10px 0 6px; padding: 12px; background: #fff;
	border: 1px solid var(--sdas-border-soft); border-radius: var(--sdas-radius-sm);
}
.sdas-medical-item { display: flex; flex-direction: column; gap: 2px; }
.sdas-medical-label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sdas-muted); }
.sdas-medical-value { font-size: 13px; color: var(--sdas-ink); }

/* ---- Doctor: per-patient service + prescription editor ---- */
.sdas-rx-editor { margin-top: 8px; }
.sdas-rx-editor > summary {
	cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--sdas-brand-700);
	list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 0;
}
.sdas-rx-editor > summary::-webkit-details-marker { display: none; }
.sdas-rx-editor > summary::before { content: "℞"; font-weight: 700; font-size: 14px; }
.sdas-rx-editor-body {
	margin: 10px 0 6px; padding: 14px; background: #fff;
	border: 1px solid var(--sdas-border-soft); border-radius: var(--sdas-radius-sm);
	max-width: 520px;
}
.sdas-rx-label {
	display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--sdas-muted); margin: 0 0 4px;
}
.sdas-rx-editor-body .sdas-rx-service {
	width: 100%; margin-bottom: 12px; padding: 8px 10px; font-size: 13px;
	border: 1px solid var(--sdas-border); border-radius: var(--sdas-radius-sm);
	background: #fff; color: var(--sdas-ink);
}
.sdas-rx-editor-body .sdas-rx-text {
	width: 100%; padding: 10px 12px; font-size: 13px; line-height: 1.6;
	border: 1px solid var(--sdas-border); border-radius: var(--sdas-radius-sm);
	background: #fff; color: var(--sdas-ink); resize: vertical; min-height: 96px;
}
.sdas-rx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sdas-rx-hint { margin: 8px 0 0; }

/* ---- Doctor: tooth picker (Universal Numbering 1–32) ---- */
.sdas-teeth-picker { margin: 2px 0 12px; }
.sdas-teeth-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sdas-teeth-arch {
	flex: 0 0 46px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--sdas-muted);
}
.sdas-teeth-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.sdas-tooth {
	width: 30px; height: 30px; padding: 0; border-radius: 7px; cursor: pointer;
	font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
	background: #fff; color: var(--sdas-ink);
	border: 1px solid var(--sdas-border); transition: all .12s ease; line-height: 1;
}
.sdas-tooth:hover { border-color: var(--sdas-brand-400); }
.sdas-tooth.is-on {
	background: var(--sdas-brand-700); color: #fff; border-color: var(--sdas-brand-700);
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.sdas-teeth-hint { margin: 2px 0 0; }

/* ---- Hospital: treatment view + print ---- */
.sdas-rx-avail { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sdas-rx-view { display: inline-block; }
.sdas-rx-view > summary {
	cursor: pointer; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--sdas-brand-700); list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.sdas-rx-view > summary::-webkit-details-marker { display: none; }
.sdas-rx-view > summary::before { content: "℞"; font-size: 13px; }
.sdas-rx-view-body { margin-top: 6px; max-width: 440px; }
.sdas-rx-view-line { font-size: 12.5px; color: var(--sdas-ink); margin-top: 6px; }
.sdas-rx-view-k { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sdas-muted); margin-right: 4px; }
.sdas-rx-view-text {
	margin-top: 4px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--sdas-ink);
	background: #fff; border: 1px solid var(--sdas-border-soft); border-radius: var(--sdas-radius-sm);
}
.sdas-print-rx { white-space: nowrap; }

/* ---- Document links (doctor view) ---- */
.sdas-doc-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sdas-doc-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sdas-brand-700); text-decoration: none; }
.sdas-doc-link:hover { text-decoration: underline; }
.sdas-doc-tag {
	display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase; background: var(--sdas-brand-100); color: var(--sdas-brand-800);
}

/* ---- Documents modal list (hospital view) ---- */
.sdas-docs-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.sdas-doc-item {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 10px 12px; background: var(--sdas-cream-2);
	border: 1px solid var(--sdas-border-soft); border-radius: var(--sdas-radius-sm);
}
.sdas-doc-item-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--sdas-ink); text-decoration: none; }
.sdas-doc-item-name:hover { color: var(--sdas-brand); text-decoration: underline; }
.sdas-doc-item-date { font-size: 11.5px; color: var(--sdas-muted); }

@media (max-width: 700px) {
	.sdas-modal-lg { width: 100%; }
	.sdas-appt-patient-action { width: 100%; justify-content: flex-start; }
}

/* =====================================================================
   Per-patient service booking + service labels
   ===================================================================== */

/* Booking: per-patient rows (checkbox + service + documents) */
.sdas-book-patient-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.sdas-book-patient-row {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 12px 14px; background: var(--sdas-cream-2);
	border: 1px solid var(--sdas-border-soft); border-radius: var(--sdas-radius-sm);
	transition: border-color .16s ease, background .16s ease;
}
.sdas-book-patient-row.is-selected { border-color: var(--sdas-brand-300); background: var(--sdas-brand-50); }
.sdas-book-patient-check { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; margin: 0; cursor: pointer; }
.sdas-book-patient-check input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--sdas-brand); }
.sdas-book-patient-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sdas-book-patient-ident .sdas-patient-check-name { font-weight: 600; color: var(--sdas-ink); font-size: 14px; }
.sdas-book-patient-ident .sdas-patient-check-meta { font-size: 12px; color: var(--sdas-muted); }
.sdas-book-patient-config { display: flex; align-items: center; gap: 8px; flex: 1 1 300px; flex-wrap: wrap; justify-content: flex-end; }
.sdas-book-patient-service { flex: 1 1 180px; min-width: 160px; margin: 0 !important; }
.sdas-book-patient-service:disabled { background: #F3F5F6; color: var(--sdas-muted); cursor: not-allowed; }
.sdas-book-patient-config .sdas-manage-docs { flex: none; }

/* Per-patient service labels in tables / chips */
.sdas-patient-chip-service { display: block; font-size: 11px; color: var(--sdas-brand-700); margin-top: 1px; }
.sdas-svc-pill {
	display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
	background: var(--sdas-brand-100); color: var(--sdas-brand-800); vertical-align: 1px;
}
.sdas-svc-summary { display: flex; flex-direction: column; gap: 3px; }
.sdas-svc-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.sdas-svc-line > span:first-child { color: var(--sdas-ink); }
.sdas-svc-total { border-top: 1px dashed var(--sdas-border); margin-top: 3px; padding-top: 3px; font-weight: 700; }

@media (max-width: 700px) {
	.sdas-book-patient-config { justify-content: flex-start; }
}