/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

:root {
	/* Font Size System - 3 Standard Sizes */
	--font-size-small: 0.625rem; /* 10px - metadata, fine print */
	--font-size-base: 0.875rem; /* 14px - standard content */
	--font-size-large: 1rem; /* 16px - headers, emphasis */

	/* Color System - Primary Brand Colors */
	--color-primary: #2e6aa2; /* Primary brand blue */
	--color-primary-hover: #285d8e; /* Darker blue for hover states */
	--color-primary-light: #488ccb; /* Light blue - Cliexa brand */
	--color-accent: #2397b8; /* Accent blue for highlights */

	/* Color System - Semantic Colors */
	--color-success: #20c997; /* Success/positive state */
	--color-danger: #fa5252; /* Danger/negative state */
	--color-warning: #ffa224; /* Warning/medium risk */
	--color-error: #ee5454; /* Error/high risk */
	--color-info: #FFA500; /* Info/orange */

	/* Color System - Text Colors */
	--color-text-primary: #414950; /* Primary text - dark */
	--color-text-secondary: #727272; /* Secondary text - medium gray */
	--color-text-tertiary: #767676; /* Tertiary text - light gray */
	--color-text-disabled: #9e9e9e; /* Disabled/missing state */
	--color-text-inverse: #ffffff; /* Text on dark backgrounds */

	/* Color System - Background Colors */
	--color-bg-page: #EEEFEF; /* Main page background */
	--color-bg-white: #ffffff; /* White background */
	--color-bg-light: #f9fafb; /* Light gray background */
	--color-bg-table-alt: #f6f8f9; /* Alternating table row */
	--color-bg-dark: #404650; /* Dark background (spinner, etc) */

	/* Color System - Border Colors */
	--color-border-light: #e0e0e0; /* Light border */
	--color-border-medium: #ced4da; /* Medium border */

	/* Color System - Legacy/Specific Use */
	--color-pdmp-flag: #488ccb; /* PDMP flag background */

	/* Success Colors (Green) - Added from CSS Audit Task 1 */
	--color-success-bright: #17a34a;      /* Bright green for active/start states */
	--color-success-dark: #15803d;        /* Dark success text */
	--color-success-darker: #14532d;      /* Very dark success text */
	--color-success-bg: #effdf4;          /* Success background (very light green) */
	--color-success-border: #bbf7d0;      /* Success border (light green) */

	/* Info Colors (Blue) - Added from CSS Audit Task 1 */
	--color-info-accent: #2463eb;         /* Primary blue accent */
	--color-info-bright: #3c82f6;         /* Bright blue for highlights */
	--color-info-text: #1f3a8a;           /* Dark blue text */
	--color-info-bg: #eff6ff;             /* Info background (very light blue) */
	--color-info-border: #bfdbfe;         /* Info border (light blue) */

	/* Danger Colors (Red) - Added from CSS Audit Task 1 */
	--color-danger-alt: #dc3545;          /* Bootstrap danger variant */
	--color-danger-dark: #b91c1b;         /* Dark danger text */

	/* Warning Colors (Yellow) - Added from CSS Audit Task 1 */
	--color-warning-bg: #fefce8;          /* Warning background (very light yellow) */
	--color-warning-border: #ffef8a;      /* Warning border (light yellow) */
	--color-warning-text: #854d0f;        /* Dark warning text */

	/* Neutral Colors (Grays) - Added from CSS Audit Task 1 */
	--color-gray-50: #f8f9fa;             /* Lightest gray (backgrounds) */
	--color-gray-100: #f5f5f5;            /* Very light gray (hover states) */
	--color-gray-200: #e0e0e0;            /* Light gray (borders) - matches existing --color-border-light */
	--color-gray-300: #dee2e6;            /* Medium light gray */
	--color-gray-400: #d1d5db;            /* Medium gray */
	--color-gray-500: #6b7280;            /* Muted text color */
	--color-gray-700: #404650;            /* Dark gray - matches existing --color-bg-dark */

	/* Semantic Aliases - Added from CSS Audit Task 1 */
	--color-bg-hover: var(--color-gray-100);
	--color-border-medium-gray: var(--color-gray-300);
}


/* ============================================================================
   BASE STYLES
   ============================================================================ */

html, body {
	font-family: "Figtree", sans-serif;
	font-optical-sizing: auto;
	background-color: var(--color-bg-page);
	color: var(--color-text-secondary);
	overflow-y: auto;
	width: 100%;
}

h1:focus {
	outline: none;
}


/* ============================================================================
   LAYOUT COMPONENTS
   ============================================================================ */

/* Header */
.header {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	padding: 8px;
	text-align: right;
	font-size: var(--font-size-large);
}

.header span {
	margin: 0 10px;
}

/* Content Zones */
.content-zone {
	padding: 8px;
	background-color: var(--color-bg-white);
	border-radius: 6px;
}

.header-content-zone {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 8px;
	background-color: var(--color-bg-white);
}

.content-multiple {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

/* Layout Utilities */
.center {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}


/* ============================================================================
   BUTTONS
   ============================================================================ */

/* Primary Button Overrides */
.btn-primary {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-text-inverse) !important;
}

.btn-primary:hover {
	background-color: var(--color-primary-hover) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-text-inverse) !important;
}

/* Outline Primary Button Overrides */
.btn-outline-primary {
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
	background-color: var(--color-primary) !important;
	color: var(--color-text-inverse) !important;
}

/* Custom Buttons */
.gpt-button {
	background-color: var(--color-primary) !important;
	color: var(--color-text-inverse);
	border: none;
	box-shadow: none;
	font-size: var(--font-size-base) !important;
}

.clear-button {
	background-color: var(--color-bg-white);
	border: 1px solid var(--color-border-medium);
	color: var(--color-text-tertiary);
	padding: 0.5rem 1rem;
	font-weight: normal;
	box-shadow: none;
	height: 38px;
	border-left: none;
}

.clear-button:hover {
	background-color: var(--color-bg-white) !important;
	border-color: var(--color-border-medium) !important;
	color: var(--color-text-tertiary) !important;
	box-shadow: none !important;
}


/* ============================================================================
   FORMS & INPUTS
   ============================================================================ */

.input-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.search-input {
	background-color: var(--color-bg-white);
	border: 1px solid var(--color-border-medium);
	color: var(--color-text-tertiary);
	padding: 0.5rem 1rem;
	font-weight: normal;
	box-shadow: none;
	height: 38px;
}

.search-input.has-value {
	color: var(--color-text-primary);
}

.search-input:focus {
	background-color: var(--color-bg-white) !important;
	border-color: var(--color-border-medium) !important;
	box-shadow: none !important;
}


/* ============================================================================
   TABLES
   ============================================================================ */

table td, table td * {
	vertical-align: top;
}

table.medication-table tr:nth-child(even) td {
	background-color: var(--color-bg-table-alt);
}

tr.space-under > td {
	padding-top: 5px;
	padding-bottom: 0;
	padding-left: 10px;
}

/* Table Typography Styles */
.table-header {
	font-size: var(--font-size-small);
	font-style: italic;
	color: var(--color-text-secondary);
}

.table-data-primary {
	font-size: var(--font-size-base);
	color: var(--color-text-primary);
}

.table-data-secondary {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}


/* ============================================================================
   CARDS & CONTAINERS
   ============================================================================ */

.list-item {
	display: flex;
	justify-content: space-between;
	background-color: var(--color-bg-white);
	align-items: center;
	padding: 12px;
	border: 1px solid var(--color-border-light);
	border-radius: 8px;
	margin-bottom: 8px;
}

.list-item:last-child {
	margin-bottom: 0;
}

.lab-results-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1;
	padding: 8px;
	background-color: var(--color-bg-white);
	border-radius: 6px;
}

.launch-panel-div {
	background-color: var(--color-bg-light);
	border-radius: 8px;
	padding: 16px;
}

.search-results-div {
	margin-top: 16px;
	margin-bottom: 16px;
	background-color: var(--color-bg-white);
	border-radius: 8px;
	padding: 16px;
	max-height: 400px;
	overflow-y: auto;
}

.spinner-container {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg-dark);
	height: 100px;
	width: 100px;
	border-radius: 10px;
	overflow: hidden;
}


/* ============================================================================
   TAGS & BADGES
   ============================================================================ */

.filter-tag {
	color: gray;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 3px;
	margin: 0 3px;
}

.filter-tag.active {
	color: var(--color-primary-light);
}

.show-all-tag {
	color: var(--color-primary-light);
	cursor: pointer;
}

.pdmp-flag {
	background-color: var(--color-pdmp-flag);
	padding: 2px 4px;
	color: var(--color-text-inverse);
	border-radius: 2px;
}

.highlight-risk {
	display: flex;
	align-items: center;
	background-color: var(--color-accent);
	color: var(--color-text-inverse);
	padding: 20px;
	border-radius: 4px;
	font-size: var(--font-size-large);
	font-weight: 500;
	height: 36px;
}

.legend-box {
	display: inline-block;
	margin-right: 2px;
	margin-left: 5px;
	height: 12px;
	width: 12px;
	vertical-align: middle;
}


/* ============================================================================
   SPECIALTY COMPONENTS
   ============================================================================ */

/* Body Map Component */
.body-map-container {
	position: relative;
	display: inline-block;
	height: 270px;
	text-align: center;
}

.body-map-layer {
	position: absolute;
	top: 0;
	left: 0;
}

.body-map-front {
	content: url("https://cdn.cliexa.com/images/html/male_body.jpg");
}

.body-map-back {
	content: url("https://cdn.cliexa.com/images/html/male_body_back.jpg");
}


/* ============================================================================
   PAGE-SPECIFIC COMPONENTS
   ============================================================================ */

.title-header-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
}


/* ============================================================================
   SEMANTIC TEXT STYLES
   ============================================================================ */

/* Section Titles */
.section-title {
	font-size: var(--font-size-large);
	font-weight: 500;
	color: var(--color-text-primary);
}

/* Patient Information */
.patient-name {
	font-size: var(--font-size-large);
	font-weight: bold;
	color: var(--color-text-primary);
}

.patient-metadata {
	font-size: var(--font-size-base);
	color: var(--color-text-secondary);
}

/* Footer & Messages */
.footer-text {
	font-size: var(--font-size-small);
	color: var(--color-text-secondary);
}

.no-data-message {
	font-size: var(--font-size-base);
	color: var(--color-text-primary);
}


/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/* Typography Utilities - Font Size */
.fs-10 {
	font-size: var(--font-size-small) !important;
}

.fs-14 {
	font-size: var(--font-size-base) !important;
}

.fs-16 {
	font-size: var(--font-size-large) !important;
}

/* Legacy Font Size Classes - Mapped to Standard System */
.text-xxsmall {
	font-size: var(--font-size-small) !important;
}

.text-xsmall {
	font-size: var(--font-size-small) !important;
}

.text-small {
	font-size: var(--font-size-base) !important;
}

.text-medium {
	font-size: var(--font-size-large) !important;
}

/* Typography Utilities - Font Weight & Style */
.text-bold {
	font-weight: bold;
}

.text-italic {
	font-style: italic;
}

/* Color Utilities */
.color-cliexa {
	color: var(--color-primary-light);
}

.color-dark {
	color: var(--color-text-primary);
}

.color-orange {
	color: var(--color-info);
}

.color-high {
	color: var(--color-error);
}

.color-medium {
	color: var(--color-warning);
}

.color-missing {
	color: var(--color-text-disabled);
}

/* Spacing Utilities */
.p-clear-margin {
	margin: unset;
}


/* ============================================================================
   COMPONENT UTILITY CLASSES
   ============================================================================ */

/* Spinners */
.spinner-small {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-bg-dark);
	height: 40px;
	width: 40px;
	border-radius: 4px;
	overflow: hidden;
}

/* Cards */
.card-container {
	padding: 1rem;
	border-radius: 8px;
	background-color: var(--color-bg-white);
	margin-bottom: 1rem;
}

.card-info {
	padding: 1rem;
	border-radius: 8px;
	background-color: var(--color-info-bg);
	border: 1px solid var(--color-info-border);
	color: var(--color-info-text);
	margin-bottom: 1rem;
}

.card-success {
	padding: 1rem;
	border-radius: 8px;
	background-color: var(--color-success-bg);
	border: 1px solid var(--color-success-border);
	color: var(--color-success-darker);
	margin-bottom: 1rem;
}

.card-warning {
	padding: 1rem;
	border-radius: 8px;
	background-color: var(--color-warning-bg);
	border: 1px solid var(--color-warning-border);
	color: var(--color-warning-text);
	margin-bottom: 1rem;
}

/* Icons */
.icon-xs {
	width: 12px;
	height: 12px;
}

.icon-sm {
	width: 16px;
	height: 16px;
}

.icon-md {
	width: 20px;
	height: 20px;
}

.icon-lg {
	width: 24px;
	height: 24px;
}

.icon-xl {
	width: 28px;
	height: 28px;
}

/* Logos */
.header-logo {
	width: 188px;
	height: auto;
}

@media (max-width: 768px) {
	.header-logo {
		width: 140px;
	}
}

/* Action Buttons */
.btn-start {
	background-color: var(--color-success-bright);
	color: var(--color-text-inverse);
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.btn-start:hover {
	background-color: var(--color-success-dark);
}

.btn-stop {
	background-color: var(--color-danger);
	color: var(--color-text-inverse);
	border: none;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.btn-stop:hover {
	background-color: var(--color-danger-dark);
}


/* ============================================================================
   STATE & ICON CLASSES
   ============================================================================ */

.refresh {
	color: var(--color-primary);
}

.happy {
	color: var(--color-success);
}

.sad {
	color: var(--color-danger);
}


/* ============================================================================
   BLAZOR RECONNECT MODAL
   ============================================================================ */

/* Official Blazor Reconnect Modal styles */
#components-reconnect-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10002;
	justify-content: center;
	align-items: center;
}

#components-reconnect-modal.components-reconnect-show {
	display: flex;
	/* Grace period: hide for 15 seconds to let Blazor auto-reconnect silently.
	   When the tab is backgrounded, the WebSocket drops but the circuit is retained
	   for 65 minutes. On tab restore, Blazor retries every 1s but each attempt
	   through Application Gateway (AGIC + cookie affinity) takes 2-3s, so 15s
	   covers ~5-7 reconnection attempts. */
	opacity: 0;
	pointer-events: none;
	animation: delayedReconnectShow 0.3s ease-in 15s forwards;
}

@keyframes delayedReconnectShow {
	to {
		opacity: 1;
		pointer-events: auto;
	}
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
	display: flex;
}

/* ERC-2097: set inline by circuitRecovery.js when it decides to auto-refresh, so the modal
   never lingers into the reload. This cannot be done by delaying the -rejected reveal the way
   -show does: both states share the delayedReconnectShow animation name, so switching classes
   does not restart it — the elapsed time carries over and `forwards` pins opacity to 1. Once
   -show has revealed the modal, no -rejected rule can hide it again. Hence display:none, set
   directly on the element, which beats a running animation and any class Blazor writes next. */

#components-reconnect-modal.components-reconnect-hide {
	display: none !important;
}

#components-reconnect-modal .reconnect-content {
	background: white;
	padding: 32px 48px;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

#components-reconnect-modal .reconnect-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e0e0e0;
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

#components-reconnect-modal .reconnect-message {
	color: var(--color-text-primary);
	font-size: var(--font-size-large);
	font-weight: 500;
	text-align: center;
}

#components-reconnect-modal .reconnect-refresh-btn {
	background: var(--color-primary);
	color: var(--color-text-inverse);
	border: none;
	border-radius: 4px;
	padding: 8px 24px;
	font-size: var(--font-size-base);
	font-weight: 500;
	cursor: pointer;
}

#components-reconnect-modal .reconnect-refresh-btn:hover {
	background: var(--color-primary-hover);
}


/* ============================================================================
   CLINICAL DROPDOWN STYLES
   ============================================================================ */

.clinical-dropdown {
	display: inline-block;
	font-family: inherit;
	font-size: var(--font-size-base);
	padding: 0.25rem 0.5rem;
	margin: 0 0.125rem;
	border: 1px solid var(--color-border-medium);
	border-radius: 0.25rem;
	background-color: var(--color-bg-white);
	color: var(--color-text-primary);
	cursor: pointer;
	min-width: 120px;
	max-width: 300px;
	vertical-align: baseline;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.clinical-dropdown:hover {
	border-color: var(--color-primary);
}

.clinical-dropdown:focus {
	border-color: var(--color-primary);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(46, 106, 162, 0.25);
}

.clinical-dropdown option:checked {
	background-color: var(--color-info-bg);
}

.clinical-dropdown option[value=""] {
	color: var(--color-text-secondary);
	font-style: italic;
}

.clinical-dropdown:disabled {
	background-color: #f5f5f5;
	border-color: #ccc;
	color: #666;
	cursor: not-allowed;
	opacity: 0.8;
}

@media print {
	.clinical-dropdown {
		border: none;
		background: transparent;
		padding: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}

	.clinical-dropdown option:not(:checked) {
		display: none;
	}
}

/* ============================================================================
   CLINICAL FREE-TEXT FIELD STYLES (ERC-2276)
   Affect and Preliminary Diagnosis are clinician-entered, never AI-populated.
   Full note width and multiline: a diagnosis or an affect description routinely
   runs past one line, and the note body around it is full width too.
   ============================================================================ */
.clinical-textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--font-size-base);
	line-height: 1.4;
	min-height: 34px;
	padding: 0.25rem 0.5rem;
	margin: 0.125rem 0;
	border: 1px solid var(--color-border-medium);
	border-radius: 0.25rem;
	background-color: var(--color-bg-white);
	color: var(--color-text-primary);
	resize: vertical;
	overflow-y: auto;
}

.clinical-textarea:hover {
	border-color: var(--color-primary);
}

.clinical-textarea:focus {
	border-color: var(--color-primary);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(46, 106, 162, 0.25);
}

.clinical-textarea:disabled {
	background-color: #f5f5f5;
	border-color: #ccc;
	color: #666;
	cursor: not-allowed;
	opacity: 0.8;
}

/* Helper text lives in CSS, not in the note text, so the reminder can never reach the
   saved note, the clipboard or the EMR. Shown at all times while the note is on screen,
   filled or not (owner call, 2026-08-25 — supersedes the hide-once-filled wording in the
   ERC-2276 acceptance criteria); print and the EMR push still drop it. */
.clinical-textarea-hint,
.clinical-textarea + .clinical-textarea-hint {
	display: block;
	margin: 0.125rem 0 0.25rem 0.125rem;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--color-text-secondary);
}

.clinical-textarea-hint::after,
.clinical-textarea + .clinical-textarea-hint::after {
	content: "This field is intentionally left blank and needs CAT input.";
}

/* Print / PDF: the value is the content - drop the control chrome and the reminder. */
@media print {
	.clinical-textarea {
		border: none;
		background: transparent;
		padding: 0;
		min-height: 0;
		resize: none;
	}

	.clinical-textarea-hint,
	.clinical-textarea + .clinical-textarea-hint {
		display: none;
	}
}

/* ============================================================================
   CLINICAL CHECKBOX STYLES
   ============================================================================ */

.clinical-checkbox {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 0.25rem;
	vertical-align: middle;
	cursor: pointer;
	accent-color: var(--color-primary);
}

.clinical-checkbox:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* ============================================================================
   CLINICAL RADIO BUTTON STYLES
   ============================================================================ */

.clinical-radio {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 0.25rem;
	vertical-align: middle;
	cursor: pointer;
	accent-color: var(--color-primary);
}

.clinical-radio:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

@media print {
	.clinical-checkbox,
	.clinical-radio {
		-webkit-appearance: auto;
		appearance: auto;
	}
}