/** @format */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #0a1118;
	font-family: "Segoe UI", "Inter", system-ui, sans-serif;
	padding: 20px;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hud {
	max-width: 1600px;
	width: 100%;
	background: #0d1b2a;
	border-radius: 28px;
	box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.topbar {
	background: #07121e;
	padding: 14px 28px;
	display: grid;
	grid-template-columns: minmax(280px, 1.3fr) minmax(480px, 2.2fr) minmax(
			360px,
			1.5fr
		);
	align-items: center;
	column-gap: 12px;
	border-bottom: 1px solid #1e3a5f;
}

.top-left-logo {
	width: 42px;
	height: 42px;
	object-fit: contain;
	display: block;
	justify-self: start;
}

.left-top {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	justify-self: start;
	width: max-content;
	/* nudge the control group slightly left to align with center column */
	margin-left: -12px;
}

.clinic-title {
	font-weight: 600;
	font-size: 1.25rem;
	color: white;
	background: #0a2a44;
	padding: 6px 14px;
	border-radius: 60px;
	border-left: 3px solid #56b4e9;
}
.action-btn {
	background: #2c5f2d;
	border: none;
	color: white;
	padding: 6px 16px;
	border-radius: 40px;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.action-btn:hover {
	transform: scale(0.98);
	filter: brightness(1.1);
}

.action-btn:active {
	filter: brightness(0.8);
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.action-btn:focus-visible {
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.reports-btn {
	background: #0072b2;
}

.right-top {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-self: end;
}

.live-clock {
	font-family: monospace;
	font-size: 1.5rem;
	font-weight: 600;
	background: #00000040;
	padding: 6px 14px;
	border-radius: 40px;
	color: #e0f2fe;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.topbar {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 12px;
	}

	.top-left-logo,
	.left-top,
	.right-top {
		justify-self: center;
	}

	.top-left-logo {
		justify-self: center;
	}

	.left-top {
		width: auto;
		max-width: 100%;
		margin-left: 0; /* reset on small screens */
	}
}

.dashboard {
	display: flex;
	flex-wrap: wrap;
}

/* Left column - Lobby sections */
.expected-column {
	flex: 1.3;
	min-width: 280px;
	background: #0a1522;
	padding: 24px 16px;
	border-right: 1px solid #1e3a5f;
}

.lobby-section {
	background: #07121e;
	border-radius: 24px;
	padding: 16px;
	margin-bottom: 20px;
	border: 1px solid #1e3a5f;
}

.lobby-section h3 {
	font-size: 1rem;
	color: #b8d4f0;
	margin-bottom: 12px;
	font-weight: 600;
}

.patient-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #1e3a5f;
	cursor: grab;
}

.patient-row:active {
	cursor: grabbing;
}

.patient-row:last-child {
	border-bottom: none;
}

.patient-info {
	font-weight: 500;
	color: white;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.checkin-btn,
.room-btn,
.walkin-btn {
	background: #0072b2;
	border: none;
	color: white;
	padding: 6px 14px;
	border-radius: 30px;
	font-weight: 600;
	cursor: pointer;
	font-size: 0.75rem;
}

.walkin-btn {
	margin-top: 12px;
	width: 100%;
}

.room-btn {
	background: #007a5a;
}

.checkin-btn:hover,
.room-btn:hover,
.walkin-btn:hover {
	filter: brightness(1.15);
}

.checkin-btn:active,
.room-btn:active,
.walkin-btn:active {
	filter: brightness(0.8);
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.checkin-btn:focus-visible,
.room-btn:focus-visible,
.walkin-btn:focus-visible {
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.insurance-badge {
	font-size: 0.9rem;
	background: #1e2f3f;
	padding: 2px 8px;
	border-radius: 20px;
	color: #ffb700;
}

/* Middle column - Rooms */
.birdseye {
	flex: 2.2;
	min-width: 480px;
	padding: 24px 20px;
	border-right: 1px solid #1e3a5f;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 12px;
}

.section-header h2 {
	font-size: 1.3rem;
	color: white;
	background: #0f2c44;
	padding: 4px 14px;
	border-radius: 26px;
}

.legend {
	display: flex;
	gap: 20px;
	font-size: 1rem;
	background: #07121e;
	padding: 10px 20px;
	border-radius: 48px;
	color: #b9d9f0;
	flex-wrap: wrap;
	font-weight: 500;
}

.legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.status-group {
	margin-bottom: 28px;
}

.group-title {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: #7f9fbf;
	margin-bottom: 12px;
	border-left: 3px solid #56b4e9;
	padding-left: 8px;
	font-weight: 600;
}

.rooms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}

.room-card {
	background: #07121e;
	border-radius: 20px;
	padding: 12px;
	cursor: pointer;
	border: 1px solid #243b55;
	transition: 0.1s;
	position: relative;
}

.room-card.drag-over {
	border: 2px dashed #ffb700;
	background: #1a2a3a;
}

.room-card.drag-over-accept {
	border: 3px dashed #00c48c;
	background: linear-gradient(180deg, #0f2a22, #112b2a);
}

.room-card.drag-over-reject {
	border: 3px dashed #d9534f;
	background: linear-gradient(180deg, #2a0f0f, #2b1212);
}

.patient-row.dragging {
	opacity: 0.6;
	transform: scale(0.995);
}

.room-card:hover {
	background: #0b1a2c;
	border-color: #4da6ff;
}

.room-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.room-name {
	background: #00000060;
	padding: 4px 10px;
	border-radius: 20px;
	color: white;
	font-weight: 600;
}

.status-glyph {
	font-size: 1.6rem;
	font-weight: 900;
	width: 36px;
	height: 36px;
	background: #00000060;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
}

.room-status-text {
	font-size: 0.7rem;
	font-weight: 700;
	margin: 8px 0 4px;
	color: #aad4f5;
	text-transform: uppercase;
}

.patient-name {
	font-size: 0.85rem;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
}

.status-clean {
	border-left: 5px solid #00c48c;
}

.status-progress {
	border-left: 5px solid #ffb700;
}

.status-ready {
	border-left: 5px solid #4da6ff;
}

.status-dirty {
	border-left: 5px solid #7b6f72;
}

.status-procedure {
	border-left: 5px solid #cc79a7;
}

.timer-alert {
	font-size: 0.7rem;
	color: #ffb700;
	margin-top: 4px;
	font-weight: bold;
}

/* Right panel - High contrast dropdown */
.right-panel {
	flex: 1.5;
	min-width: 360px;
	background: #0a1522;
	padding: 24px 20px;
}

.snapshot-card {
	background: #07121e;
	border-radius: 24px;
	padding: 18px;
	border-top: 4px solid #56b4e9;
	max-height: 85vh;
	overflow-y: auto;
}

.snapshot-card h3 {
	color: #ffb700;
	margin-bottom: 12px;
	font-weight: 600;
}

.snapshot-card {
	color: #ffffff;
}

.high-bp {
	border: 2px solid #ffb700;
	background: #2a2c1a;
}

.ehr-section {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #1e3a5f;
}

.ehr-title {
	font-weight: bold;
	color: #56b4e9;
	margin-bottom: 8px;
}

.action-buttons {
	display: flex;
	gap: 12px;
	margin-top: 18px;
	flex-wrap: wrap;
	align-items: center;
}

/* High contrast dropdown */
.status-dropdown {
	background: #0d1b2a;
	color: #ffffff;
	padding: 10px 16px;
	border-radius: 40px;
	border: 2px solid #56b4e9;
	font-weight: bold;
	font-size: 0.9rem;
	cursor: pointer;
}

.status-dropdown option {
	background: #0d1b2a;
	color: white;
}

.btn-primary {
	background: #0072b2;
	color: white;
}

.btn-primary:hover {
	background: #0086d1;
}

.btn-primary:active {
	background: #004f7c;
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.btn-primary:focus-visible {
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.btn-secondary {
	background: #2c3e50;
	color: white;
	border: 1px solid #4da6ff;
}

.btn-secondary:hover {
	background: #3a5068;
}

.btn-secondary:active {
	background: #1a2535;
	border-color: #ffb700;
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.btn-secondary:focus-visible {
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.btn-clean {
	background: #007a5a;
	color: white;
}

.btn-clean:hover {
	background: #009e73;
}

.btn-clean:active {
	background: #005940;
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.btn-clean:focus-visible {
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.btn-chart {
	background: #5a2d82;
	color: white;
}

.btn-chart:hover {
	background: #6f38a0;
}

.btn-chart:active {
	background: #3b1a57;
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.btn-chart:focus-visible {
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.chart-link {
	color: #ffb700;
	text-decoration: underline;
	cursor: pointer;
	font-weight: bold;
	background: none;
	border: none;
	font-size: 0.85rem;
	padding: 0;
}

button {
	padding: 8px 18px;
	border-radius: 40px;
	font-weight: bold;
	cursor: pointer;
	border: none;
}

/* Numeric keypad */
.keypad {
	background: #07121e;
	border-radius: 24px;
	padding: 12px;
	margin-top: 16px;
	border: 1px solid #4da6ff;
}

.keypad-title {
	font-weight: bold;
	margin-bottom: 8px;
	color: #56b4e9;
}

.keypad-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 8px;
}

.keypad-btn {
	background: #1e2f3f;
	border: 1px solid #4da6ff;
	padding: 12px;
	font-size: 1.4rem;
	font-weight: bold;
	border-radius: 20px;
	cursor: pointer;
	text-align: center;
	color: white;
}

.keypad-btn:hover {
	background: #0072b2;
}

.keypad-btn:active {
	background: #004f7c;
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.keypad-btn:focus-visible {
	outline: 3px solid #ffb700;
	outline-offset: 2px;
}

.vital-input-row {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.vital-input-row label {
	min-width: 70px;
	font-weight: bold;
	color: white;
}

.vital-input-row input {
	background: #0a1522;
	border: 1px solid #4da6ff;
	padding: 6px 12px;
	border-radius: 40px;
	color: white;
	width: 140px;
}

.toast-top {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: #ffb700;
	color: #0d1b2a;
	padding: 12px 28px;
	border-radius: 60px;
	display: flex;
	gap: 20px;
	align-items: center;
	z-index: 1000;
	font-weight: bold;
}

.toast-top button {
	background: #0d1b2a;
	color: #ffb700;
}

.hidden {
	display: none;
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 2000;
	justify-content: center;
	align-items: center;
	color: white;
}

/* Modal background stays dark, but text inside is white */
.modal-content {
    background: #0D1B2A;
    border: 1px solid #56B4E9;
}

/* Headers get a slightly warmer accent but still bright */
.modal-header h2 {
    color: #56B4E9 !important;
}

/* Section headers (e.g., "Weekly Summary") */
.report-section h3 {
    color: #FFB700 !important;
}

/* Stat card numbers and labels */
.stat-card .stat-number {
    color: #56B4E9 !important;
}
.stat-card .stat-label {
    color: #E0F2FE !important;
}

/* Table headers and cells */
#roomLatencyTable th {
    background: #0A2A44;
    color: white !important;
}
#roomLatencyTable td {
    color: #FFFFFF !important;
    border-color: #1E3A5F;
}

.export-csv-btn {
    background: #2C5F2D;
    color: white !important;
    border: none;
}

.export-csv-btn:hover {
    filter: brightness(1.1);
}

.modal-content {
	background: #0d1b2a;
	border-radius: 28px;
	max-width: 500px;
	padding: 24px;
	border: 1px solid #56b4e9;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	color: #fff;
}

.close-modal {
	background: transparent;
	border: none;
	font-size: 1.8rem;
	cursor: pointer;
	color: white;
}

.modal input,
.modal select {
	background: #1e2f3f;
	color: white;
	border: 1px solid #4da6ff;
	padding: 8px;
	border-radius: 40px;
	width: 100%;
	margin-bottom: 12px;
}