/* ==========================================================================
   Clinic Manager theme — thin layer over compiled Bootstrap 5.3 (self-hosted).
   Source of truth: docs/DESIGN.md. Section map:
     1. Design tokens              (:root, feeds runtime Bootstrap vars)
     2. Component recolors         (compiled Bootstrap ignores :root for these)
     2b. Form theme                (stacked/columnar layouts, ADR-0013)
     2c. Master catalogs & tables  (sticky headers, column sizing)
     3. Shell                      (.app-navbar, .app-footer)
     4. Typography helpers         (.eyebrow, .metric)
     5. Mobile ergonomics          (44px targets, sticky bar, reduced motion)
     6. Print                      (letterhead-friendly output)
   ========================================================================== */

/* 1. Design tokens --------------------------------------------------------- */
:root {
	/* Primary brand: clinical teal. Teal-600 is the brand hue but fails WCAG
	   AA as body-size text; see DESIGN.md §2.1 for the usage ladder. */
	--bs-primary:               #0d9488; /* Teal-600 — icons, borders, focus rings, ≥24px metrics */
	--bs-primary-rgb:           13, 148, 136;
	--bs-primary-text-emphasis: #0f766e; /* Teal-700 — 5.5:1 on white */
	--bs-primary-bg-subtle:     #ccfbf1; /* Teal-100 */
	--bs-primary-border-subtle: #99f6e4; /* Teal-200 */
	--bs-link-color:            #0f766e; /* Teal-700 — 5.5:1 on white */
	--bs-link-hover-color:      #115e59; /* Teal-800 — 7.6:1 */

	/* Secondary: slate */
	--bs-secondary:             #475569;
	--bs-secondary-rgb:         71, 85, 105;
	--bs-secondary-bg-subtle:   #f1f5f9;

	/* Status: success / normal (emerald) */
	--bs-success:               #10b981;
	--bs-success-rgb:           16, 185, 129;
	--bs-success-bg-subtle:     #d1fae5;
	--bs-success-text-emphasis: #065f46;

	/* Status: warning / waiting (amber) */
	--bs-warning:               #f59e0b;
	--bs-warning-rgb:           245, 158, 11;
	--bs-warning-bg-subtle:     #fef3c7;
	--bs-warning-text-emphasis: #92400e;

	/* Status: danger / alert (rose) */
	--bs-danger:                #e11d48;
	--bs-danger-rgb:            225, 29, 72;
	--bs-danger-bg-subtle:      #ffe4e6;
	--bs-danger-text-emphasis:  #9f1239;

	/* Canvas & surfaces */
	--bs-body-bg:               #f8fafc; /* Slate-50 */
	--bs-body-color:            #1e293b; /* Slate-800 */
	--bs-border-color:          #e2e8f0; /* Slate-200 */
	--bs-border-radius:         0.75rem; /* 12px default */
	--bs-border-radius-lg:      1rem;    /* 16px cards */

	/* Elevation (feeds .shadow-sm / .shadow / .shadow-lg) */
	--bs-box-shadow:    0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03);
	--bs-box-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
	--bs-box-shadow-lg: 0 10px 30px rgba(15, 23, 42, .16);

	/* Dark slate shell */
	--app-nav-bg:    #1e293b; /* Slate-800 */
	--app-footer-bg: #f1f5f9; /* Slate-100 */
}

/* 2. Component recolors -----------------------------------------------------
   Compiled Bootstrap bakes these values at build time; the :root tokens above
   do not reach them. Keep in sync with DESIGN.md §2.2. */

/* Buttons: teal-700 base, teal-800 hover, teal-900 active (AA ladder). */
.btn-primary {
	--bs-btn-bg: #0f766e;
	--bs-btn-border-color: #0f766e;
	--bs-btn-hover-bg: #115e59;
	--bs-btn-hover-border-color: #115e59;
	--bs-btn-active-bg: #134e4a;
	--bs-btn-active-border-color: #134e4a;
	--bs-btn-disabled-bg: #0f766e;
	--bs-btn-disabled-border-color: #0f766e;
	--bs-btn-focus-shadow-rgb: 15, 118, 110;
}
.btn-outline-primary {
	--bs-btn-color: #0f766e;
	--bs-btn-border-color: #0f766e;
	--bs-btn-hover-bg: #0f766e;
	--bs-btn-hover-border-color: #0f766e;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #115e59;
	--bs-btn-active-border-color: #115e59;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #0f766e;
	--bs-btn-disabled-border-color: #0f766e;
	--bs-btn-focus-shadow-rgb: 15, 118, 110;
}

/* Status buttons: 700-level fills so white labels clear AA. */
.btn-success {
	--bs-btn-bg: #047857;
	--bs-btn-border-color: #047857;
	--bs-btn-hover-bg: #059669;
	--bs-btn-hover-border-color: #059669;
	--bs-btn-active-bg: #065f46;
	--bs-btn-active-border-color: #065f46;
	--bs-btn-disabled-bg: #047857;
	--bs-btn-disabled-border-color: #047857;
	--bs-btn-focus-shadow-rgb: 4, 120, 87;
}
.btn-outline-success {
	--bs-btn-color: #047857;
	--bs-btn-border-color: #047857;
	--bs-btn-hover-bg: #047857;
	--bs-btn-hover-border-color: #047857;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #065f46;
	--bs-btn-active-border-color: #065f46;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #047857;
	--bs-btn-disabled-border-color: #047857;
	--bs-btn-focus-shadow-rgb: 4, 120, 87;
}

.btn-warning {
	--bs-btn-color: #1e293b; /* dark label on amber, ~9:1 */
	--bs-btn-bg: #f59e0b;
	--bs-btn-border-color: #f59e0b;
	--bs-btn-hover-color: #1e293b;
	--bs-btn-hover-bg: #d97706;
	--bs-btn-hover-border-color: #d97706;
	--bs-btn-active-bg: #b45309;
	--bs-btn-active-border-color: #b45309;
	--bs-btn-disabled-color: #1e293b;
	--bs-btn-disabled-bg: #f59e0b;
	--bs-btn-disabled-border-color: #f59e0b;
	--bs-btn-focus-shadow-rgb: 245, 158, 11;
}
.btn-outline-warning {
	--bs-btn-color: #b45309; /* Amber-700 for 4.5:1+ text contrast */
	--bs-btn-border-color: #d97706;
	--bs-btn-hover-color: #1e293b;
	--bs-btn-hover-bg: #f59e0b;
	--bs-btn-hover-border-color: #f59e0b;
	--bs-btn-active-color: #1e293b;
	--bs-btn-active-bg: #b45309;
	--bs-btn-active-border-color: #b45309;
	--bs-btn-disabled-color: #b45309;
	--bs-btn-disabled-border-color: #d97706;
	--bs-btn-focus-shadow-rgb: 245, 158, 11;
}

.btn-danger {
	--bs-btn-bg: #e11d48;
	--bs-btn-border-color: #e11d48;
	--bs-btn-hover-bg: #be123c;
	--bs-btn-hover-border-color: #be123c;
	--bs-btn-active-bg: #9f1239;
	--bs-btn-active-border-color: #9f1239;
	--bs-btn-disabled-bg: #e11d48;
	--bs-btn-disabled-border-color: #e11d48;
	--bs-btn-focus-shadow-rgb: 225, 29, 72;
}
.btn-outline-danger {
	--bs-btn-color: #e11d48;
	--bs-btn-border-color: #e11d48;
	--bs-btn-hover-bg: #e11d48;
	--bs-btn-hover-border-color: #e11d48;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: #be123c;
	--bs-btn-active-border-color: #be123c;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #e11d48;
	--bs-btn-disabled-border-color: #e11d48;
	--bs-btn-focus-shadow-rgb: 225, 29, 72;
}

/* Badge contrast: Teal-700 ensures >= 4.5:1 contrast against white text */
.badge.bg-primary {
	background-color: #0f766e !important;
}

/* Forms: teal focus treatment instead of baked Bootstrap blue. */
.form-control:focus,
.form-select:focus {
	border-color: #0f766e;
	box-shadow: 0 0 0 .25rem rgba(15, 118, 110, .25);
}
.form-check-input:focus {
	border-color: #0f766e;
	box-shadow: 0 0 0 .25rem rgba(15, 118, 110, .25);
}
.form-check-input:checked {
	background-color: #0f766e;
	border-color: #0f766e;
}

/* Active-state chrome: pills, dropdowns, pagination, list groups. */
.nav-pills {
	--bs-nav-pills-link-active-bg: #0f766e;
	--bs-nav-pills-link-active-color: #fff;
}
.dropdown-menu {
	--bs-dropdown-link-active-bg: #0f766e;
	--bs-dropdown-link-active-color: #fff;
}
.pagination {
	--bs-pagination-color: #0f766e;
	--bs-pagination-hover-color: #115e59;
	--bs-pagination-focus-color: #115e59;
	--bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(15, 118, 110, .25);
	--bs-pagination-active-bg: #0f766e;
	--bs-pagination-active-border-color: #0f766e;
}
.list-group {
	--bs-list-group-active-bg: #0f766e;
	--bs-list-group-active-border-color: #0f766e;
}

/* In-chamber queue row: full-width tint, never a side stripe. */
.row-in-chamber {
	--bs-table-bg: var(--bs-primary-bg-subtle);
}

/* Cards: align inner radii with rounded-3 to prevent child bleed */
.card.rounded-3 {
	border-radius: var(--bs-border-radius-lg) !important;
}
.card.rounded-3 > .card-header {
	border-top-left-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
	border-top-right-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
}
.card.rounded-3 > .card-footer {
	border-bottom-left-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
	border-bottom-right-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
}
.card.rounded-3 > .list-group-flush:last-child .list-group-item:last-child {
	border-bottom-left-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
	border-bottom-right-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
}

/* Alerts: emphasis text on subtle tints (never raw 500-level text). */
.alert-primary {
	--bs-alert-color: #0f766e;
	--bs-alert-bg: #ccfbf1;
	--bs-alert-border-color: #99f6e4;
}
.alert-success {
	--bs-alert-color: #065f46;
	--bs-alert-bg: #d1fae5;
	--bs-alert-border-color: #a7f3d0;
}
.alert-warning {
	--bs-alert-color: #92400e;
	--bs-alert-bg: #fef3c7;
	--bs-alert-border-color: #fde68a;
}
.alert-danger {
	--bs-alert-color: #9f1239;
	--bs-alert-bg: #ffe4e6;
	--bs-alert-border-color: #fecdd3;
}

/* Keyboard focus: teal ring everywhere, lighter on the dark shell. */
:focus-visible {
	outline: 2px solid #0d9488;
	outline-offset: 2px;
}
.app-navbar :focus-visible {
	outline-color: #99f6e4;
}

/* 2b. Form theme (clinic_form_theme.html.twig, ADR-0013) -------------------- */
/* Metronic-inspired refinements layered on bootstrap_5_layout markup.
   Two layouts: stacked (default rows) and columnar (row + row_attr cols). */

/* Semibold labels, hugged closer to their fields (Metronic rhythm). */
.form-label,
.col-form-label {
	font-weight: 600;
	margin-bottom: .375rem;
}

/* Required marker: the base layout adds .required to labels; the asterisk
   stays in CSS so form types carry no markup noise. */
.form-label.required::after,
.col-form-label.required::after {
	content: " *";
	color: var(--bs-danger);
}

/* Opt-in Metronic "solid" (filled) inputs: attr => ['class' => 'form-control-solid']. */
.form-control-solid,
.form-select-solid {
	background-color: var(--bs-secondary-bg-subtle);
	border-color: transparent;
}
.form-control-solid:focus,
.form-select-solid:focus {
	background-color: var(--bs-secondary-bg-subtle);
}
.form-control-solid::placeholder {
	color: var(--bs-secondary-color);
}

/* 2c. Master catalogs: tables & filter drawer -------------------------------- */
/* Sticky header for long paginated catalogs (thead keeps its .table-light bg). */
.table-sticky thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}
/* Actions column hugs its buttons; notes column clamps so instructions wrap. */
.table .col-actions {
	width: 1%;
	white-space: nowrap;
}
.table .col-notes {
	max-width: 250px;
}
.table .col-age-sex {
	width: 90px;
}
/* Mobile filter drawer (.offcanvas-md in _filter_bar.html.twig): size to
   content instead of the offcanvas 30vh default. */
.offcanvas-bottom.master-filter-bar {
	height: auto;
	max-height: 90vh;
}

/* 3. Shell ------------------------------------------------------------------- */
/* Use with <nav class="navbar navbar-expand-lg app-navbar" data-bs-theme="dark">:
   the color mode flips the toggler icon and nested dropdowns; the vars below
   fine-tune link tones. */
.app-navbar {
	background-color: var(--app-nav-bg);
	--bs-navbar-color: rgba(255, 255, 255, .72);
	--bs-navbar-hover-color: #fff;
	--bs-navbar-active-color: #fff;
	--bs-navbar-disabled-color: rgba(255, 255, 255, .4);
	--bs-navbar-brand-color: #fff;
	--bs-navbar-brand-hover-color: #fff;
}
.app-footer {
	background-color: var(--app-footer-bg);
	border-top: 1px solid var(--bs-border-color);
}

/* 4. Typography helpers ------------------------------------------------------ */
/* Small uppercase category label (DESIGN.md §4.1). */
.eyebrow {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--bs-secondary);
}
/* Queue tokens, vitals, and counters (28-32px semibold, tabular numerals). */
.metric {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--bs-body-color);
}
/* Sub-small typography utilities for compact badges and meta tags. */
.fs-7 {
	font-size: 0.8125rem;
}
.fs-8 {
	font-size: 0.75rem;
}

/* 5. Mobile ergonomics -------------------------------------------------------- */
/* 44px minimum touch targets below 768px (DESIGN.md §5.1). */
@media (max-width: 767.98px) {
	.btn,
	.form-select,
	.form-control {
		min-height: 44px;
		padding-top: .625rem;
		padding-bottom: .625rem;
	}
	/* Pagination and nav links carry the same 44px floor (§5.1). */
	.pagination .page-link {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.app-navbar .nav-link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
	/* Status switches: enlarge the control; a full 44px track looks broken. */
	.form-check.form-switch .form-check-input {
		width: 2.75em;
		height: 1.375em;
	}
}

.touch-target {
	min-height: 44px;
}

/* Sticky consultation action bar with PWA home-indicator clearance (§5.3). */
.sticky-action-bar {
	position: sticky;
	bottom: 0;
	z-index: 1020;
	background-color: var(--bs-body-bg);
	border-top: 1px solid var(--bs-border-color);
	padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}

/* Motion conveys state only; honor reduced-motion preferences (§6). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* 6. Print -------------------------------------------------------------------- */
@media print {
	.app-navbar,
	.app-footer,
	.btn,
	.sticky-action-bar {
		display: none !important;
	}
	body {
		background: #fff !important;
		color: #000 !important;
	}
	.card {
		box-shadow: none !important;
	}
	.table :is(th, td) {
		border: 1px solid #475569 !important;
	}
}

/* ── OPD cockpit ───────────────────────────────────────────── */

.autocomplete-menu {
	position: absolute;
	z-index: 1080;
	max-height: 320px;
	overflow-y: auto;
	background: var(--bs-body-bg);
}

.cockpit-history-scroll {
	max-height: 520px;
	overflow-y: auto;
}

/* ── Prescription letterhead ───────────────────────────────── */

.rx-sheet {
	max-width: 840px;
	margin: 0 auto;
	background: #ffffff;
	color: #0f172a;
}

.rx-symbol {
	font-family: "Times New Roman", Times, "Liberation Serif", serif;
	font-size: 2.25rem;
	line-height: 1;
	font-weight: 700;
	color: #0f172a;
}

@media print {
	.no-print,
	nav,
	.sticky-action-bar {
		display: none !important;
	}

	body {
		background: #ffffff !important;
		color: #000000 !important;
	}

	.rx-sheet {
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.rx-sheet table {
		font-size: 12px;
	}

	.rx-sheet table thead th {
		background-color: #f1f5f9 !important;
		color: #334155 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.print-sheet {
		font-size: 13px;
	}

	.card {
		box-shadow: none !important;
		border: 0 !important;
	}
}