@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);
}