@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&family=Noto+Sans+Condensed:wght@400;500&display=swap");

body {
	font-family: "Noto Sans", sans-serif;
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: "Noto Sans", sans-serif;
	font-weight: 700;
}

/* Ensure Dash components inherit these styles where possible */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner *,
.dash-dropdown .Select-control,
.dash-dropdown .Select-menu-outer {
	font-family: "Noto Sans", sans-serif !important;
}

:root {
	/* Enterprise Palette */
	--rxpmi-purple: #8958a4;
	--severity-high: #e25c3c;
	/* Red */
	--severity-medium: #f39c12;
	/* Orange */
	--severity-low: #27ae60;
	/* Green */

	/* Waffle Chart Settings */
	--waffle-gap: 4px;
	--waffle-size: 20px;
}

/* Waffle Chart Styles */
.waffle-container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--waffle-gap);
	max-width: 100%;
	padding: 10px;
}

.waffle-node {
	width: var(--waffle-size);
	height: var(--waffle-size);
	border-radius: 2px;
	cursor: pointer;
	transition:
		transform 0.1s ease-in-out,
		box-shadow 0.1s ease-in-out;
	position: relative;
	/* For tooltip positioning if needed, though we use title attribute for simplicity first */
}

.waffle-node:hover {
	transform: scale(1.2);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	z-index: 10;
	border: 1px solid #333;
}

/* Simple tooltip styling if we were to use a custom span, 
   but for now we rely on the 'title' attribute or Dash Tooltip component. 
   Let's add a class just in case we switch to custom HTML tooltips later. */
.waffle-tooltip {
	display: none;
	/* Hidden by default */
}

/* --- Patient Dashboard Redesign --- */

:root {
	/* Enterprise Palette - Updated */
	--rxpmi-purple: #413987;
	--rxpmi-blue: #3267b2;
	--rxpmi-orange: #f15a24;
	--rxpmi-gray-bg: #e6e6e6;
	--rxpmi-gray-text: #999999;

	/* Severity Colors (Keep existing if needed, or update) */
	--severity-high: #f76239;
	--severity-medium: #fcae3d;
	--severity-low: #92ce52;

	/* Waffle Chart Settings */
	--waffle-gap: 4px;
	--waffle-size: 20px;
}

/* Main Header */
.patient-metrics-header {
	background-color: var(--rxpmi-purple);
	color: white;
	padding: 20px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.patient-metrics-header h1 {
	font-weight: 300;
	/* Lighter weight as per design */
	font-size: 2.5rem;
	margin: 0;
}

.patient-metrics-header .logo-placeholder {
	text-align: right;
}

/* Tabs Styling */
.nav-tabs {
	border-bottom: none;
	margin-left: 40px;
	/* Align with content */
}

.nav-tabs .nav-link {
	border: none;
	border-radius: 0;
	background-color: var(--rxpmi-gray-bg);
	color: var(--rxpmi-gray-text);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0;
	margin-right: 5px;
	height: 25px;
	width: 282px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.nav-tabs .nav-link.active {
	background-color: var(--rxpmi-blue);
	color: white;
}

/* Content Area */
#tab-content {
	padding: 20px 40px !important;
	/* Override default p-4 */
}

/* Headings */
h2 {
	color: var(--rxpmi-blue);
	font-weight: 300;
	font-size: 3rem;
	margin-bottom: 10px;
}

.text-muted {
	color: #555 !important;
}

/* Data Table Overrides */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
	background-color: var(--rxpmi-purple) !important;
	color: white !important;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: none !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
	border-bottom: 1px solid #eee !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}

.dash-table-container
	.dash-spreadsheet-container
	.dash-spreadsheet-inner
	tr:hover
	td {
	background-color: #f9f9f9;
}

/* Selected Row */
.dash-table-container .dash-spreadsheet-container
	.dash-spreadsheet-inner
	tr.selected-row
	td {
	background-color: var(--rxpmi-orange) !important;
	color: white !important;
}

/* Modal / Chat Transcript */
.modal-content {
	border-radius: 10px;
	border: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-header {
	border-bottom: none;
	padding-bottom: 0;
}

.modal-footer {
	border-top: none;
}

.chat-transcript {
	font-family: "Noto Sans", sans-serif;
}

.chat-entry {
	margin-bottom: 10px;
}

.chat-role {
	font-weight: bold;
	color: var(--rxpmi-blue);
	margin-right: 5px;
}

.chat-content {
	color: #333;
}

/* --- Table Filter Styling --- */
.dash-table-container .dash-spreadsheet-container
	.dash-spreadsheet-inner
	th
	input:not([type="radio"]):not([type="checkbox"]) {
	color: white !important;
	font-family: "Noto Sans", sans-serif !important;
	font-weight: 400;
}

.dash-table-container
	.dash-spreadsheet-container
	.dash-spreadsheet-inner
	th
	.dash-filter--case--sensitive {
	color: white !important;
}

.dash-table-container
	.dash-spreadsheet-container
	.dash-spreadsheet-inner
	th
	.dash-filter--case--sensitive:hover {
	color: #ddd !important;
}

/* --- Dropdown Arrow Styling --- */
/* Customizing the standard Dash/React-Select dropdown arrow */
.dash-dropdown .Select-arrow {
	border-color: #999 transparent transparent !important;
	border-width: 6px 6px 3px !important;
}

.dash-dropdown .Select-arrow-zone:hover > .Select-arrow {
	border-top-color: #555 !important;
}

/* --- Patient Details Modal Styling --- */
.patient-details-modal .modal-content {
	background-color: #a1c3e5;
	/* Light blue background from Figma */
	border-radius: 10px;
	/* Rounded edges */
	border: none;
	padding: 20px;
	/* Padding around the white content box */
	width: 483.94px;
	/* Exact width from Figma */
	height: 518.15px;
	/* Exact height from Figma */
	/* Center the content */
	display: flex;
	flex-direction: column;
}

.patient-details-modal .modal-header {
	border-bottom: none;
	padding: 0;
	margin-bottom: 10px;
	background-color: transparent;
	/* Transparent header background */
}

.patient-details-modal .modal-body {
	background-color: white;
	padding: 20px;
	overflow-y: auto;
	flex-grow: 1;
	/* Fill available space */
	/* Scrollbar styling could go here if needed */
}

.patient-details-modal .modal-footer {
	border-top: none;
	padding: 0;
	margin-top: 10px;
	background-color: transparent;
	justify-content: center;
	/* Center the close button */
}

/* Specific text styles for the modal content */
.transcript-header {
	color: #413987;
	/* Dark Purple */
	font-weight: bold;
	font-size: 0.9rem;
	margin-bottom: 5px;
}

.patient-id-highlight {
	color: #f15a24;
	/* Orange */
	font-weight: bold;
	font-size: 1.1rem;
	margin-bottom: 15px;
}

.chat-role-user {
	color: #413987;
	/* Dark Purple */
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8rem;
}

.chat-role-model {
	color: #413987;
	/* Dark Purple */
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8rem;
}

/* --- Patient Summary Panel (ADR Page) --- */
.patient-summary-panel {
	background-color: #a1c3e5;
	/* Light blue background */
	border-radius: 10px;
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.patient-summary-content {
	background-color: white;
	padding: 20px;
	flex-grow: 1;
	overflow-y: auto;
	border-radius: 0;
	/* Sharp edges inside as per modal design */
}

.reaction-list-item {
	padding: 10px;
	margin-bottom: 5px;
	font-size: 0.9rem;
	color: #333;
}

.reaction-list-item:nth-child(odd) {
	background-color: #e6e6e6;
	/* Gray */
}

.reaction-list-item:nth-child(even) {
	background-color: white;
}

.summary-label {
	color: #413987;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8rem;
	margin-bottom: 5px;
}

/* --- Calendar / DatePicker Styling --- */

/* Header Styling */
.DateInput_input {
	font-family: "Noto Sans", sans-serif;
	color: #333;
	font-weight: 500;
}

.DateInput_input__focused {
	border-bottom: 2px solid var(--rxpmi-blue);
}

/* Selected Date Range (Dark Purple) */
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
	background: var(--rxpmi-purple) !important;
	border: 1px solid var(--rxpmi-purple) !important;
	color: #fff !important;
}

.CalendarDay__selected_span {
	background: var(--rxpmi-purple) !important;
	border: 1px solid var(--rxpmi-purple) !important;
	color: #fff !important;
	opacity: 0.8;
	/* Slight opacity for the span */
}

.CalendarDay__selected_span:hover {
	background: var(--rxpmi-purple) !important;
	border: 1px solid var(--rxpmi-purple) !important;
	color: #fff !important;
}

/* Hovered Date Range (Dark Blue - "Default" interaction) */
.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
	background: var(--rxpmi-blue) !important;
	border: 1px solid var(--rxpmi-blue) !important;
	color: #fff !important;
}

/* Current Day Highlight */
.CalendarDay__today {
	color: var(--rxpmi-orange);
	font-weight: bold;
}

/* Navigation Arrows */
.DayPickerNavigation_button__default {
	border: 1px solid #eee;
	background-color: #fff;
}

.DayPickerNavigation_button__default:hover {
	border: 1px solid var(--rxpmi-blue);
}