/* ==========================================================================
   Shared Components - Extracted from duplicated template styles

   This file contains reusable CSS components that were previously duplicated
   across multiple templates (intake_results.html, provider_dashboard.html, etc.)
   ========================================================================== */

/* ===== Priority Badges =====
   Used for displaying patient priority/urgency levels
   Usage: <span class="priority-badge priority-high">Urgent</span>
*/
.priority-badge {
	padding: 0.5rem 1rem;
	border-radius: 20px;
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.priority-high {
	background-color: var(--bs-danger);
	color: var(--bs-white);
}

.priority-medium {
	background-color: var(--bs-warning);
	color: var(--bs-body-color);
}

.priority-low {
	background-color: var(--bs-success);
	color: var(--bs-white);
}

/* ===== Pain Level Bar =====
   Visual bar showing pain level 0-10
   Usage:
   <div class="pain-level-bar">
       <div class="pain-level-fill" style="width: 70%;"></div>
   </div>
   <span class="pain-level-value">7/10</span>
*/
.pain-level-bar {
	height: 12px;
	border-radius: 6px;
	background: var(--bs-gray-200);
	position: relative;
	overflow: hidden;
}

.pain-level-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(to right, var(--bs-success), var(--bs-warning), var(--bs-danger));
}

.pain-level-value {
	font-weight: 600;
	color: var(--turnkey-navy);
}

/* ===== Pain Slider (Form Input) =====
   Custom range slider with gradient track for pain level input
   Usage: <input type="range" class="pain-slider" min="0" max="10">
*/
.pain-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 12px;
	border-radius: 6px;
	background: transparent !important;
	outline: none;
	cursor: pointer;
	padding: 0 !important;
}

/* Chrome/Safari track */
.pain-slider::-webkit-slider-runnable-track {
	width: 100%;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(to right, var(--bs-success), var(--bs-warning), var(--bs-danger)) !important;
}

/* Firefox track */
.pain-slider::-moz-range-track {
	width: 100%;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(to right, var(--bs-success), var(--bs-warning), var(--bs-danger)) !important;
}

/* Chrome/Safari thumb */
.pain-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bs-white) !important;
	border: 3px solid var(--turnkey-navy);
	cursor: pointer;
	box-shadow: var(--bs-box-shadow-sm);
	margin-top: -6px;
}

/* Firefox thumb */
.pain-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--bs-white) !important;
	border: 3px solid var(--turnkey-navy);
	cursor: pointer;
	box-shadow: var(--bs-box-shadow-sm);
}

/* ===== Loading Overlay =====
   Centered loading spinner container
   Usage:
   <div class="loading-overlay">
       <div class="spinner-border text-primary" role="status">
           <span class="visually-hidden">Loading...</span>
       </div>
   </div>
*/
.loading-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
}

/* ===== Diagnosis/Info Cards =====
   Highlighted information cards with left accent border
   Usage: <div class="diagnosis-card">...</div>
*/
.diagnosis-card {
	background-color: var(--turnkey-info-bg-subtle);
	border: 1px solid var(--turnkey-info-border-subtle);
	border-left: 4px solid var(--bs-primary);
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.diagnosis-card h5 {
	color: var(--bs-primary);
	margin-bottom: 0.75rem;
}

/* ===== Symptom Lists =====
   Bullet list with colored bullets for symptoms
   Usage: <ul class="symptom-list"><li>Symptom</li></ul>
*/
.symptom-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.symptom-list li {
	margin-bottom: 0.5rem;
	padding-left: 1rem;
	position: relative;
}

.symptom-list li::before {
	content: "\2022";
	position: absolute;
	left: 0;
	color: var(--bs-danger);
	font-weight: bold;
}

/* ===== Avatar Circle =====
   Circular avatar container with centered content
   Usage: <div class="avatar-circle bg-primary text-white">JD</div>
*/
.avatar-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
}

/* ===== Empty State =====
   Placeholder for empty content areas
   Usage: <div class="empty-state"><i class="fas fa-inbox"></i><p>No items</p></div>
*/
.empty-state {
	text-align: center;
	padding: 3rem;
	color: var(--bs-secondary);
}

.empty-state i {
	font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.5;
}

/* ===== Action Cards =====
   Clickable card with hover effect
   Usage: <div class="action-card p-3">...</div>
*/
.action-card {
	border: 1px solid var(--bs-border-color);
	border-radius: 12px;
	transition: box-shadow 0.2s;
}

.action-card:hover {
	box-shadow: var(--bs-box-shadow);
}

/* ===== Appointment Status Badges =====
   Background colors for appointment status badges.
   Usage: <span class="badge bg-{{ appointment.status|lower }}">{{ appointment.get_status_display }}</span>
*/
.bg-scheduled { background-color: var(--bs-secondary) !important; }
.bg-arrived { background-color: var(--bs-purple) !important; }
.bg-imaging { background-color: var(--bs-warning) !important; color: var(--bs-body-color) !important; }
.bg-with_ma { background-color: var(--bs-pink) !important; }
.bg-waiting_provider { background-color: var(--bs-danger) !important; }
.bg-with_provider { background-color: var(--bs-orange) !important; }
.bg-procedure { background-color: var(--bs-danger) !important; }
.bg-complete { background-color: var(--bs-success) !important; }
.bg-signed { background-color: var(--bs-success) !important; }
.bg-cancelled { background-color: var(--bs-secondary) !important; }
.bg-no_show { background-color: var(--bs-secondary) !important; }

/* ===== Appointment Status Border Colors =====
   Left-border accent for schedule/queue list items.
   Usage: <div class="schedule-item status-{{ appointment.status|lower }}">...</div>
*/
.status-scheduled { border-left-color: var(--bs-secondary); }
.status-arrived { border-left-color: var(--bs-purple); }
.status-imaging { border-left-color: var(--bs-warning); }
.status-with_ma { border-left-color: var(--bs-pink); }
.status-waiting_provider {
	border-left: 4px solid;
	border-image: repeating-linear-gradient(
		45deg, var(--bs-danger), var(--bs-danger) 4px, var(--bs-white) 4px, var(--bs-white) 8px
	) 1;
}
.status-with_provider { border-left-color: var(--bs-orange); }
.status-procedure { border-left-color: var(--bs-danger); }
.status-complete { border-left-color: var(--bs-success); }
.status-signed { border-left-color: var(--bs-success); }
.status-cancelled { border-left-color: var(--bs-secondary); }
.status-no_show { border-left-color: var(--bs-secondary); }