/*
 * ==============================================================================
 * CONSOLIDATED & REFACTORED STYLES.CSS
 * ==============================================================================
 *
 * This file has been refactored to remove duplication and create a single
 * source of truth for all styles.
 *
 * It is structured as follows:
 * 1. Global & Base Styles (html, body, fonts, etc.)
 * 2. Layout & Utility Classes (.page-center-vertical, .hidden, etc.)
 * 3. Common Components (Buttons, Modals, Forms, Logo, Toggles, etc.)
 * 4. Page-Specific Styles (Monitor, Controller, Portal, etc.)
 * 5. Animations & Keyframes
 *
 * ==============================================================================
 */

/*
 * ==============================================================================
 * 1. GLOBAL & BASE STYLES
 * ==============================================================================
 */

/* Base HTML & Body */
html {
    height: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: white;
    margin: 0;
    /* Common background pattern from index, portal, connect_monitor, basic_controller */
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 50"%3E%3Cpath d="M 0 25 L 10 25 L 15 15 L 20 25 L 25 25 L 30 35 L 35 25 L 40 25 L 45 35 L 50 25 L 55 25 L 60 15 L 65 25 L 70 25 L 75 35 L 80 25 L 85 25 L 90 15 L 95 25 L 100 25" fill="none" stroke="%23e5e7eb" stroke-width="1" /%3E%3C/svg%3E');
    background-repeat: repeat;
    background-position: center;
}

/* Headings & Paragraphs */
h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

p {
    color: #4b5563;
    line-height: 1.6;
}

/* Common title highlight */
.title-highlight {
    color: #2563eb;
}

/*
 * ==============================================================================
 * 2. LAYOUT & UTILITY CLASSES
 * ==============================================================================
 */

/* For centering content on pages like index.html and connect_monitor.html */
.page-center-vertical {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Utility to hide elements */
.hidden {
    display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.waveform-container.hidden, .vitals-card.hidden {
    display: none;
    flex-grow: 0;
}

/*
 * ==============================================================================
 * 3. COMMON COMPONENTS
 * ==============================================================================
 */

/* --- Logo (Consolidated & Centered) --- */
.logo {
    width: 220px;
    height: auto;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --- Buttons (Consolidated) --- */
.btn {
    font-weight: 600;
    padding: 0.5rem 1rem; /* User specified padding */
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px dashed;
    border-color: black;
    cursor: pointer;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5; /* User specified opacity */
    cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
    background-color: #2563eb; /* User specified color */
    color: white;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover:not(:disabled) {
    background-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 7px 10px rgba(37, 99, 235, 0.2);
}

/* Secondary Button (Solid) */
.btn-secondary {
    background-color: #f5f5f5;
    color: #000000;
    border-color: #000000;
    border-style: dashed;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

/* Secondary Button (Outline) - From index.html */
.btn-secondary-outline {
    background-color: transparent;
    color: #2563eb;
    border-color: lab(85.13% -0.23 -3.44);
}

.btn-secondary-outline:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

/* Small Button */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Icon-only Button */
.icon-btn {
    background: none;
    border: none;
    color:red;
    padding: 0.25rem;
    border-radius: 99px;
}

.icon-btn:hover {
    background-color: #e5e7eb;
    color: #1f2937;
}

/* Unified Action Buttons (Advisory, Events, Emergencies) */
.btn-action-unified {
    font-weight: 600;
    padding: 0.75rem 1rem; /* Consistent large touch target */
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid #d1d5db;
    cursor: pointer;
    background-color: #ffffff;
    color: #374151;
    min-height: 3rem; /* Enforce height */
    width: 100%;
    font-size: 0.9rem;
}

.btn-action-unified:hover {
    background-color: #f9fafb;
    border-color: #9ca3af;
}

.btn-action-unified.active {
    background-color: rgb(37, 99, 235);
    color: #ffffff;
    border-color: rgb(29, 78, 216);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

/* Ventilator Emergency Specific Color (Red when active) */
.btn-action-unified.emergency-btn.active {
    background-color: #dc2626;
    border-color: #991b1b;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.3);
}

/* Fetal Event Specific Color (Green/Teal when active) */
.btn-action-unified.fhr-btn.active {
    background-color: #059669;
    border-color: #047857;
}

.clear-advisory-btn {
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid transparent;
    cursor: pointer;
    background-color: #4b5563; /* Dark Gray */
    color: #ffffff;
    min-height: 3rem;
}

/* --- Modals (Consolidated) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Default light-modal background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: rgba(255, 255, 255, 0.84);
    padding: 1.5rem;
    border-radius: 0.75rem;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

/* Dark Modal Modifier (for monitor, basic/mobile controller) */
.modal-overlay.modal-dark {
    background: rgba(0, 0, 0, 0.75);
}

.modal-dark .modal-content {
    background: #1f2937;
    border: 1px solid #4b5563;
    color: white;
    text-align: center;
}

.modal-body {
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0;
}

.modal-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.5rem;
    cursor: pointer;
}

/* --- Form Controls (Consolidated) --- */
.control-label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500; /* Replaced font-medium */
    font-size: 0.875rem; /* Replaced text-sm */
    color: #374151; /* Replaced text-gray-700 */
}

.form-input,
.control-input,
.control-select,
.control-textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #0000007e;
    border-radius: 0.375rem;
    box-sizing: border-box; /* Ensures padding doesn't break width */
}

.control-select-blue {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #0000007e;
    border-radius: 0.375rem;
    box-sizing: border-box; /* Ensures padding doesn't break width */
    background-color: rgba(72, 105, 255, 0.126);
    
}

.control-textarea {
    min-height: 120px;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.361);
}

/* Style from basic_controller.html */
.control-input-gray {
    background-color: rgba(0, 47, 255, 0.217);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    text-align: center;
}
.control-input-gray:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
    background-color: rgba(255, 208, 0, 0.265);
    outline: none;
}

.scenario-code-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #0000007e;
    border-radius: 0.375rem;
    box-sizing: border-box; /* Ensures padding doesn't break width */
    background-color: rgba(255, 255, 255, 0.176);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    text-align: center;
}

/* Style from portal.html */
.form-input-lg {
    padding: 0.75rem;
    margin-bottom: 1rem;
}

/* Form container from portal.html */
.form-container {
    max-width: 400px;
    margin: 4rem auto;
    padding: 2rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    text-align: center;
    align-items: center;
}

/* --- Sliders (Consolidated) --- */
.control-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #4b5563;
    border-radius: 9999px;
    outline: none;
}

.control-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.control-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* --- Toggle Switches (Consolidated) --- */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    -webkit-tap-highlight-color: transparent;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4b5563; /* Default off state */
    transition: .4s;
    border-radius: 28px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2563eb; /* Active state from mobile controller */
}

input:checked + .slider:before {
    transform: translateX(22px);
}

/* --- Misc Components --- */

/* Index/Connect Monitor Container */
.container {
    text-align: center;
    background: white;
    padding: 3rem 4rem;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 500px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Index Footer */
.footer {
    margin-top: 2rem;
    font-size: 0.875rem;
    color: #9ca3af;
    text-align: center;
}

/* Index Button Group */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 320px;
}

/* Portal Error Message */
.error-message {
    color: #dc2626;
    background-color: #fee2e2;
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* Portal Toggle Link */
.toggle-link {
    color: #1d4ed8;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 1rem;
    display: inline-block;
}

/* Portal Session Item */
.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: rgba(30, 166, 0, 0.153);
}

/* Portal Organisation Item */
.organisation-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: rgba(0, 80, 166, 0.153);
}

/* Controller Tags */
.tag {
    background-color: #dbeafe;
    color: #1e40af;
    padding: 0.25rem 0.5rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Toasts (from basic_controller.html) */
#toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 2000;
}

.toast {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
    transform: translateY(20px);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background-color: #16a34a;
}

.toast-error {
    background-color: #dc2626;
}

/*
 * ==============================================================================
 * 4. PAGE-SPECIFIC STYLES
 * ==============================================================================
 */

/* --- Monitor Page (monitor.html) --- */
/* Add class="monitor-page" to the <body> tag of monitor.html */
.monitor-page,
.monitor-page body,
.monitor-page html {
    height: 100%;
    overflow: hidden;
    background-color: #050505;
    font-family: "Roboto Mono", monospace;
    /* Override global background image */
    background-image: none;
}

.monitor-page .monitor-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: 40px 1fr;
    height: 100%;
    gap: 4px;
    padding: 4px;
}

.monitor-page .header {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    justify-content: space-between; /* Change to space-between */
    align-items: center;
    position: relative;
    background-color: #000;
}

.monitor-page .alarm-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: black;
    text-align: center;
    transition: background-color 0.5s;
}

.monitor-page .alarm-box-advisory {
    background-color: #3b82f6;
    color: white;
}

.monitor-page .header-buttons-left,
.monitor-page .header-buttons-right {
    display: flex;
    gap: 8px;
    align-items: center; /* Vertically align buttons */
}

.monitor-page .alarm-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto; /* Let the content define the width */
    max-width: 60%; /* Prevent it from overlapping buttons */
}

.monitor-page .header-btn {
    padding: 6px 16px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.monitor-page .header-btn:hover {
    filter: brightness(1.15);
}

.monitor-page .header-btn:active {
    transform: translateY(1px);
    filter: brightness(0.9);
}

.monitor-page .defib-btn-color {
    background: linear-gradient(to bottom, #b91c1c, #991b1b);
}

.monitor-page .pacer-btn-color {
    background: linear-gradient(to bottom, #1d4ed8, #1e3a8a);
}

.monitor-page .alarm-silence-btn {
    background: linear-gradient(to bottom, #f59e0b, #d97706);
    color: black;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.monitor-page .alarm-silence-btn.silenced {
    background: linear-gradient(to bottom, #92400e, #78350f);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    color: #fde68a;
}

.monitor-page .main-content {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 4px;
    overflow: hidden;
}

.monitor-page .waveform-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.monitor-page .waveform-container {
    position: relative;
    background-color: #000000;
    border: 1px solid #000000;
    padding: 4px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex-grow: 1;
}

.monitor-page .waveform-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.monitor-page .waveform-label {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 1.2rem;
    font-weight: 400;
    z-index: 5;
    text-shadow: 1px 1px 2px #050505;
}

.monitor-page .vitals-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


.monitor-page .main-content.values-only-grid {
    grid-template-columns: 1fr;
}

.monitor-page .main-content.values-only-grid .waveform-area {
    display: none;
}

.monitor-page .main-content.values-only-grid .vitals-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 4px;
}

.monitor-page .main-content.values-only-grid .vitals-card {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.monitor-page .main-content.values-only-grid .vitals-card .label {
    text-align: center;
}

.monitor-page .main-content.values-only-grid .vitals-card .value {
    font-size: 6rem; /* Big numbers */
    line-height: 1.1;
    text-align: center;
}

.monitor-page .main-content.values-only-grid .vitals-card .unit {
    text-align: center;
}

.monitor-page .vitals-card {
    border: 1px solid #333;
    padding: 5px 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 0;
    flex-grow: 1;
}

.monitor-page .vitals-card .label {
    font-size: 1.8rem;
    font-weight: 700;
}

.monitor-page .vitals-card .value {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    text-align: right;
}

.monitor-page .vitals-card .unit {
    font-size: 1.2rem;
    font-weight: 400;
    text-align: right;
    margin-top: -5px;
}

.monitor-page .placeholder {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #444;
    border: 1px dashed #333;
    background-color: #111;
    width: 100%;
    height: 100%;
}

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

/* Monitor Modal Controls */
.monitor-page .modal-control-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.monitor-page .modal-control-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    min-width: 100px;
    text-align: center;
}

.monitor-page .modal-control-btn {
    background-color: #4b5563;
    border: 1px solid #6b7280;
    color: #fff;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.monitor-page .modal-control-btn:disabled {
    background-color: #374151;
    color: #6b7280;
    cursor: not-allowed;
}

.monitor-page .modal-action-btn {
    padding: 1rem 2rem;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 8px;
    border: 2px solid;
}

.monitor-page .shock-btn {
    background-color: #ff6a00;
    border-color: #ff8c00;
    color: black;
}

.monitor-page .shock-btn.charging {
    background-color: #ffa500;
    animation: pulse 1s infinite;
}

.monitor-page .shock-btn:disabled {
    background-color: #5a3e1c;
    border-color: #7c5828;
    color: #888;
    animation: none;
}

.monitor-page .modal-button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.monitor-page .alarm-limit-group {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 1rem;
}

.monitor-page .alarm-input {
    background-color: #374151;
    border: 1px solid #4b5563;
    color: white;
    text-align: center;
    border-radius: 0.375rem;
    padding: 0.5rem;
}

.monitor-page .pacer-toggle-btn.active,
.monitor-page .sync-btn.active {
    background-color: #00ff00;
    color: black;
    border-color: #90ee90;
    transition: none;
}

.monitor-page .pacer-mode-btn.active {
    background-color: #2563eb; /* A distinct blue for active mode */
    color: white;
    border-color: #60a5fa; /* A lighter blue for the border */
}

/* --- Advanced Controller Page (advanced_controller.html) --- */
/* Add class="adv-controller-page" to the <body> tag of advanced_controller.html */
.adv-controller-page .content-area {
    background: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    overflow-y: auto;
    /* Steal the background image from body */
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 50"><path d="M 0 25 L 10 25 L 15 15 L 20 25 L 25 25 L 30 35 L 35 25 L 40 25 L 45 35 L 50 25 L 55 25 L 60 15 L 65 25 L 70 25 L 75 35 L 80 25 L 85 25 L 90 15 L 95 25 L 100 25" fill="none" stroke="%23e5e7eb" stroke-width="1" /></svg>');
    background-repeat: repeat;
    background-position: center;
}

.adv-controller-page .folder,
.adv-controller-page .scenario-item {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s;
}

.adv-controller-page .folder:hover,
.adv-controller-page .scenario-item:hover {
    background-color: #f3f4f6;
}

.adv-controller-page .folder.active,
.adv-controller-page .scenario-item.active {
    background-color: #e0e7ff;
    color: #3730a3;
    font-weight: 600;
}

.adv-controller-page .state-card {
    background-color: rgba(34, 145, 255, 0.203);
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    position: relative;
}

.adv-controller-page .phase-card {
    background-color: rgba(93, 93, 93, 0.178);
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    position: relative;
}

.adv-controller-page .phase-card,
.adv-controller-page .scenario-item {
    cursor: grab;
}

.adv-controller-page .state-card {
    cursor: pointer;
}

.adv-controller-page .state-card.selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}

.adv-controller-page .dragging {
    opacity: 0.5;
    border: 2px dashed #2563eb !important;
    background-color: #e0e7ff;
}

.adv-controller-page .drag-over {
    background-color: #e0e7ff !important;
    border-style: dashed;
}

.adv-controller-page .transition-arrow {
    text-align: center;
    font-size: 1.5rem;
    color: #9ca3af;
    margin: 0.5rem 0;
}

.adv-controller-page .display-toggle-btn {
    background-color: #4b5563;
    color: #d1d5db;
    border: 1px solid #6b7280;
}

.adv-controller-page .display-toggle-btn.active {
    background-color: #16a34a;
    color: white;
    border-color: #16a34a;
}

.adv-controller-page .btn-emergency {
    background-color: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
    border: 1px solid #4b5563; /* gray-600 */
}

.adv-controller-page .btn-emergency.active, .ventilator-page .btn-emergency.active, .ventilator-page .mode-btn.active, .ventilator-page .flow-pattern-btn.active {
    background-color: #4f46e5;
    color: white;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
}

.adv-controller-page .btn-emergency.active {
    background-color: #b91c1c; /* red-700 */
    color: white;
    border-color: #ef4444; /* red-500 */
}

.adv-controller-page .folder-collapse-icon {
    transition: transform 0.2s ease-in-out;
}

.adv-controller-page #scenario-driver-hud {
    background-color: #1f2937;
}
.adv-controller-page #scenario-driver-hud .bg-gray-700 {
    background-color: #374151;
}
.adv-controller-page #scenario-driver-hud .bg-black {
    background-color: #111827;
}
.adv-controller-page #scenario-driver-hud .border-gray-600 {
    border-color: #4b5563;
}
.adv-controller-page #scenario-driver-hud .text-gray-300 {
    color: #d1d5db;
}
.adv-controller-page #scenario-driver-hud .text-gray-400 {
    color: #9ca3af;
}
.adv-controller-page #scenario-driver-hud .control-select,
.adv-controller-page #scenario-driver-hud .control-input {
    background-color: #374151;
    border-color: #4b5563;
    color: white;
}

.adv-controller-page .inspector-tab {
    font-weight: 600;
    padding: 0.5rem 1rem; /* User specified padding */
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid transparent;
    cursor: pointer;
    background-color: #e5e7eb;
    color: #4b5563;
    border-color: #d1d5db;
}

.adv-controller-page .inspector-tab.active {
    font-weight: 600;
    padding: 0.5rem 1rem; /* User specified padding */
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid transparent;
    cursor: pointer;
    background-color: #009617;
    color: #ffffff;
    border-color: #d1d5db;
}

.adv-controller-page .live-view-active .state-card,
.adv-controller-page .live-view-active .phase-card,
.adv-controller-page .live-view-active .scenario-item {
    cursor: default;
}
.adv-controller-page .live-view-active .phase-name-input,
.adv-controller-page .live-view-active .phase-comment-input {
    pointer-events: none;
}
.adv-controller-page .live-view-active .delete-phase-btn,
.adv-controller-page .live-view-active .delete-state-btn,
.adv-controller-page .live-view-active .transition-edit-btn {
    display: none;
}
.adv-controller-page .live-activation-controls {
    display: none;
}
.adv-controller-page .live-view-active .live-activation-controls {
    display: flex;
}
.adv-controller-page .live-view-active .state-card.active-state {
    box-shadow: 0 0 0 3px #16a34a;
}

.adv-controller-page #driver-cpr-artifact:checked + div .dot {
    transform: translateX(1.5rem); /* Replaced @apply transform translate-x-6 */
}
.adv-controller-page .override-tab {
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #9ca3af;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}
.adv-controller-page .override-tab.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}
.adv-controller-page .override-tab-content {
    animation: fadeIn 0.3s ease-in-out;
}
.adv-controller-page .control-group-slider {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.adv-controller-page .org-scenario {
    border-left: 4px solid #3b82f6;
    background-color: #eff6ff;
}
.adv-controller-page .org-scenario:hover {
    background-color: #dbeafe;
}

/* --- Mobile Controller Page (mobile_controller.html) --- */
/* Add class="mobile-controller-page" to the <body> tag of mobile_controller.html */
.mobile-controller-page {
    -webkit-tap-highlight-color: transparent;
}

.mobile-controller-page .shadow-inner-white {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.mobile-controller-page .accordion-header {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.mobile-controller-page .accordion-header.active {
    background-color: #4b5563;
}

.mobile-controller-page .accordion-chevron {
    transition: transform 0.3s ease-in-out;
}

.mobile-controller-page .accordion-header.active .accordion-chevron {
    transform: rotate(180deg);
}

.mobile-controller-page .display-toggle-btn {
    background-color: #4b5563;
    color: #d1d5db;
}

.mobile-controller-page .display-toggle-btn.active {
    background-color: #16a34a;
    color: white;
}

.mobile-controller-page .vital-pill {
    font-size: 0.75rem; /* text-xs */
    font-family: sans-serif; /* font-sans */
    font-weight: 600; /* font-semibold */
    padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
    border-radius: 9999px; /* rounded-full */
    background-color: #374151; /* bg-gray-700 */
    color: #d1d5db; /* text-gray-300 */
}

.mobile-controller-page .alarm-critical {
    background-color: #991b1b;
    border-color: #dc2626; /* ADD THIS LINE */
}

.mobile-controller-page .alarm-warning {
    background-color: #92400e;
    border-color: #f59e0b; /* ADD THIS LINE */
}

.mobile-controller-page .is-updating {
    animation: flash-warning 0.5s 2;
}

/* --- Basic Controller Page (basic_controller.html) --- */
/* Add class="basic-controller-page" to the <body> tag of basic_controller.html */

/* New Sidebar Styles */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #4b5563;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.sidebar-nav-item:hover {
    background-color: #f3f4f6;
    color: #111827;
}
.sidebar-nav-item.active {
    background-color: #eff6ff;
    color: #2563eb;
    font-weight: 600;
}
.sidebar-nav-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
    background-color: transparent !important;
    color: #9ca3af !important;
}

/* New Vital Card Styles */
.vital-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}
.vital-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.vital-value-display {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    width: 3ch; /* Just enough width for values */
}
.vital-value-display:focus {
    outline: none;
    border-bottom: 2px solid #2563eb;
}
.vital-unit {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* --- Legacy Styles (kept for compatibility if needed) --- */
.basic-controller-page .tab-btn {
    background-color: transparent;
    border-color: lab(85.13% -0.23 -3.44);
}

.control-group-int {
    background-color: rgba(240, 240, 240, 0.381);
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

.arrest-control-group-int {
    background-color: rgba(255, 212, 212, 0.381);
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

.tab-btn {
    font-weight: 600;
    padding: 0.5rem 1rem; /* User specified padding */
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid transparent;
    cursor: pointer;
    background-color: #e5e7eb;
    color: #4b5563;
    border-color: #d1d5db;
}

.basic-controller-page .tab-btn.active {
    background-color: transparent;
    color: #25eb6e;
    border-color: lab(85.13% -0.23 -3.44);
}

.fhr-btn.active {
    background-color: #16a34a; /* A green color to indicate active */
}

.adv-controller-page .fhr-event-btn.active-event,
.adv-controller-page .display-toggle-btn.active-event {
    background-color: #16a34a;
    border-color: #6ee7b7;
    color: white;
    box-shadow: 0 0 10px rgba(22, 163, 74, 0.7);
}

.tab-btn.active {
    font-weight: 600;
    padding: 0.5rem 1rem; /* User specified padding */
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border: 1px solid transparent;
    cursor: pointer;
    background-color: #009617;
    color: #ffffff;
    border-color: #d1d5db;
}

.basic-controller-page .tab-content {
    border: 1px solid #d1d5db;
    border-top: none;
    padding: 1.5rem;
    background-color: white;
    border-radius: 0 0 0.375rem 0.375rem;
}

/* --- Shared Monitor/Vitals Colors --- */
.ecg-color { color: #00ff00; }
.spo2-color { color: #00ffff; }
.art-color { color: #ff0000; }
.etco2-color { color: #ffff00; }
.resp-color { color: #ffffff; }
.cvp-color { color: #00aaff; }
.fhr-color { color: #ff00ff; }
.ctg-color { color: #ffc0cb; }
.pap-color { color: #f97316; } /* Orange */


/*
 * ==============================================================================
 * 5. ANIMATIONS & KEYFRAMES
 * ==============================================================================
 */

/* --- Spin (Spinner) --- */
.spinner {
    animation: spin 1s linear infinite;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Pulse (Charging Button) --- */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* --- FadeIn (Modal Content) --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Flashing Alarms (Consolidated) --- */
@keyframes flash-red {
    50% { background-color: #dc2626; color: white; }
}

@keyframes flash-warning {
    /* Consolidated from flash-yellow and flash-warning */
    50% { background-color: #f59e0b; color: black; }
}

@keyframes flash-blue-border {
    50% { border-color: #3b82f6; box-shadow: 0 0 12px #3b82f6; }
}

.is-transitioning {
    /* The border-color and box-shadow will flash, 
       leaving background-color free for alarms. */
    animation: flash-blue-border 1s step-end infinite;
}

.flashing-red {
    animation: flash-red 1s step-end infinite;
}

.flashing-warning {
    /* Replaces .flashing-yellow */
    animation: flash-warning 1.5s step-end infinite;
}
.flashing-override {
    /* Uses the same animation */
    animation: flash-warning 1.5s step-end infinite;
}

.flashing-active {
    animation: flash-active 1.5s ease-in-out infinite;
}

@keyframes flash-active {
    0%, 100% { background-color: #f97316; } /* Orange */
    50% { background-color: #ea580c; } /* Darker Orange */
}

.flashing-red *,
.flashing-warning *,
.flashing-override * {
    color: inherit !important;
}

.autoscale-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.25rem;
    font-weight: bold;
    z-index: 1001;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out;
}

/* Ventilator Monitor Specific Styles */

/* --- Default (Dark/Hamilton) Styles --- */
.monitor-page .monitor-section,
.monitor-page .monitor-section-secondary {
    border-radius: 0.375rem;
    padding: 0.25rem;
}

/* Dark Mode Default Backgrounds */
.monitor-page .monitor-section {
    background-color: #111827; /* gray-900 */
}
.monitor-page .monitor-section-secondary {
    background-color: #1f2937; /* gray-800 */
}

/* Text Colors */
.monitor-page .monitor-section-title {
    color: #9ca3af; /* gray-400 */
    border-bottom: 1px solid #374151; /* gray-700 */
}
.monitor-page .monitor-label {
    color: #9ca3af; /* gray-400 */
}

.monitor-page .param-box {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
    border: 1px solid #4b5563;
    color: white; /* Default text white */
}
.monitor-page .param-box:hover {
    background-color: #374151;
}
.monitor-page .param-box .font-bold {
    font-size: 1rem;
}
.monitor-page .param-box span:last-child {
    font-size: 1.1rem;
    font-weight: 700;
}

/* --- Optimized UI Elements (Basic Controller) --- */

.session-id-highlight {
    /* Removed custom font family as requested */
    font-size: 1.5rem;
    font-weight: 800;
    color: #2563eb;
    background-color: #eff6ff;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    border: 2px dashed #93c5fd;
    letter-spacing: 0.05em;
    display: inline-block;
}

/* Ergonomic Inputs */
.ergo-input,
.ergo-select {
    width: 100%;
    padding: 0.5rem 0.75rem; /* Slightly reduced padding to not look cartoonish */
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #ffffff;
    transition: all 0.2s;
    height: 3rem; /* Consistent height */
    color: #111827;
}

.ergo-input:focus,
.ergo-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.ergo-label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #374151;
}

/* Alarm Input Specifics */
.alarm-input-cell input {
    width: 100%;
    min-width: 60px;
    height: 3rem; /* Match ergo inputs */
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
}

/* --- Dark Mode Overrides --- */
body.dark-mode {
    background-color: #111827 !important; /* Gray 900 */
    background-image: none !important;
    color: #f3f4f6;
}

body.dark-mode .sidebar-nav-item {
    color: #d1d5db;
}
body.dark-mode .sidebar-nav-item:hover {
    background-color: #1f2937;
    color: white;
}
body.dark-mode .sidebar-nav-item.active {
    background-color: #1e3a8a; /* Dark Blue */
    color: #60a5fa;
}

body.dark-mode aside {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

body.dark-mode main {
    background-color: #0f172a !important; /* Slate 900 */
}

body.dark-mode .vital-card {
    background-color: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-mode .vital-value-display {
    color: #f3f4f6;
}

body.dark-mode .vital-unit {
    color: #9ca3af;
}

body.dark-mode .ergo-label,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
    color: #f3f4f6 !important;
}

body.dark-mode .ergo-input,
body.dark-mode .ergo-select,
body.dark-mode .vital-value-display {
    background-color: #374151;
    border-color: #4b5563;
    color: white;
}

body.dark-mode .vital-value-display {
    background-color: transparent;
    border-color: transparent;
}

body.dark-mode .session-id-highlight {
    background-color: #1e3a8a;
    border-color: #3b82f6;
    color: #93c5fd;
}

body.dark-mode .btn-action-unified {
    background-color: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}
body.dark-mode .btn-action-unified:hover {
    background-color: #4b5563;
}

/* Visibility Eye Toggle */
.visibility-toggle {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}
.visibility-toggle:hover {
    background-color: rgba(0,0,0,0.05);
    color: #6b7280;
}
.visibility-toggle.active {
    color: #2563eb; /* Blue when active/visible */
}
.visibility-toggle.inactive {
    color: #d1d5db;
}

body.dark-mode .visibility-toggle:hover {
    background-color: rgba(255,255,255,0.1);
    color: #d1d5db;
}

/* New Grid Layout for Measured/Calculated */
.monitor-page .param-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

/* New Card Style (Default Dark) */
.monitor-page .param-card {
    background-color: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 0.375rem;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.monitor-page .param-card .param-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #9ca3af;
}

.monitor-page .param-card .param-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.monitor-page .param-card .param-unit {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Color accents for specific parameters */
.monitor-page .param-card[data-param="pip"] .param-label,
.monitor-page .param-card[data-param="pplat"] .param-label,
.monitor-page .param-card[data-param="map"] .param-label {
    color: #ffff00; /* Yellow to match pressure waveform */
}
.monitor-page .param-card[data-param="vte"] .param-label {
    color: #00ffff; /* Cyan to match volume waveform */
}

/* --- Drager (Light) Theme Overrides --- */
body.bg-white .monitor-page .header {
    background-color: #f3f4f6; /* gray-100 */
    border-bottom: 1px solid #e5e7eb;
}

body.bg-white .monitor-page .monitor-section,
body.bg-white .monitor-page .monitor-section-secondary {
    background-color: #f9fafb; /* gray-50 */
    border: 1px solid #e5e7eb;
}

body.bg-white .monitor-page .monitor-section-title {
    color: #374151; /* gray-700 */
    border-bottom-color: #e5e7eb;
}
body.bg-white .monitor-page .monitor-label {
    color: #4b5563; /* gray-600 */
}

body.bg-white .monitor-page .param-box {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #111827; /* gray-900 */
}
body.bg-white .monitor-page .param-box:hover {
    background-color: #f3f4f6;
}

body.bg-white .monitor-page .param-card {
    background-color: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
}

body.bg-white .monitor-page .param-card .param-label {
    color: #4b5563; /* gray-600 */
}

/* Keep accent colors visible in light mode but slightly darker for contrast */
body.bg-white .monitor-page .param-card[data-param="pip"] .param-label,
body.bg-white .monitor-page .param-card[data-param="pplat"] .param-label,
body.bg-white .monitor-page .param-card[data-param="map"] .param-label {
    color: #d97706; /* amber-600 */
}
body.bg-white .monitor-page .param-card[data-param="vte"] .param-label {
    color: #0891b2; /* cyan-600 */
}

body.bg-white .monitor-page .waveform-container {
    background-color: #ffffff;
    border-color: #e5e7eb;
}
body.bg-white .monitor-page .waveform-label {
    text-shadow: none;
    color: #000;
}
body.bg-white .monitor-page #sidebarGraphContainer {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
}


.monitor-page .param-box-large {
    padding: 0.5rem;
}
.monitor-page .param-box-large .font-bold {
    font-size: 1.5rem; /* Large label for measured values */
}
.monitor-page .param-box-large .float-right {
    font-size: 2.25rem; /* Very large value */
    font-weight: 700;
    line-height: 1;
}


/* Added prior to removal of inline classes */

/* General Card Style */
.card {
    background-color: rgba(255, 255, 255, 0.361);
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

/* Danger Button Style (for Logout) */
.btn-danger {
    background-color: #dc2626; /* Red color */
    color: white;
}
.btn-danger:hover {
    background-color: #b91c1c; /* Darker red on hover */
}

/* Alternative Primary Button Style (Scenario Builder in portal) */
.btn-primary-alt {
    background-color: #3728d9;
    color: white;
}
.btn-primary-alt:hover {
    background-color: #3123bf; /* Adjust hover color as needed */
}

/* Dark Button Style (Connect Monitor in portal) */
.btn-dark {
    background-color: #1f2937; /* Dark gray */
    color: white;
    border-color: #4b5563; /* Adjust border if needed */
}
.btn-dark:hover {
    background-color: #111827; /* Darker gray */
}

/* Admin Table Styles */
.admin-table {
    min-width: 100%;
    background-color: white;
    border-collapse: collapse;
}
.admin-table thead {
    background-color: #e5e7eb; /* bg-gray-200 */
}
.admin-table th,
.admin-table td {
    padding: 0.5rem 1rem; /* py-2 px-4 */
    text-align: left;
    border-bottom: 1px solid #e5e7eb; /* border-b */
}
.admin-table th {
    font-weight: 600;
}

/* Enhanced Accordion Styles (Mobile Controller) */
.mobile-controller-page .accordion-header { /* Scoped to mobile page */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    padding: 1rem; /* p-4 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1f2937; /* Add separator */
}
.mobile-controller-page .accordion-content { /* Scoped to mobile page */
    padding: 1rem; /* p-4 */
    border-top: 1px solid #374151; /* border-gray-700 */
    /* space-y-4 is handled by direct children margins or grid gaps typically */
}
.mobile-controller-page .accordion-header.active {
    background-color: #4b5563; /* gray-600 */
}
.mobile-controller-page .accordion-chevron {
    transition: transform 0.3s ease-in-out;
}
.mobile-controller-page .accordion-header.active .accordion-chevron {
    transform: rotate(180deg);
}

/* Mini Monitor Card Styles (Mobile Controller) */
.mini-monitor-card {
    background-color: #111827; /* bg-gray-900 */
    color: #d1d5db; /* Default text */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.75rem; /* p-3 */
    text-align: center;
    border: 2px solid transparent; /* ADD THIS LINE */
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s; /* ADD/MODIFY THIS LINE */
}
.mini-monitor-card .label {
    font-size: 0.75rem; /* text-xs */
    color: #9ca3af; /* text-gray-400 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.25rem;
    gap: 0.25rem; /* Added gap for pill */
}
.mini-monitor-card .value {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
}

/* Monitor Header Button Colors */
.monitor-page .fullscreen-btn-color {
    background: linear-gradient(to bottom, #4f46e5, #3730a3);
}

.landing-page {
  /* This applies TWO backgrounds:
    1. A semi-transparent white gradient on top (to fade the image).
    2. Your image on the bottom.
  */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
    url('background-image.jpg');

  /* Make the background cover the whole screen and stay fixed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container-landing {
    background: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 3rem 4rem;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 500px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-connect-remote-screen {
    background: rgba(255, 255, 255, 0.85);
    text-align: center;
    padding: 3rem 4rem;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 500px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Mobile Controller Page Animations --- */

/* 1. Alarm Colors */
.mobile-controller-page .mini-monitor-card.alarm-critical {
    background-color: #991b1b; /* Dark Red */
    border-color: #dc2626; /* Bright Red */
}
.mobile-controller-page .mini-monitor-card.alarm-warning {
    background-color: #92400e; /* Dark Orange/Yellow */
    border-color: #f59e0b; /* Bright Orange/Yellow */
}

/* 2. Transition "Flash" */
.mobile-controller-page .mini-monitor-card.is-transitioning {
    /* Uses the blue border flash animation */
    animation: flash-blue-border 1s step-end infinite;
}

/* 3. "Send Update" Button Flash */
.flashing-warning {
    /* Re-using the monitor's alarm flash for the button */
    animation: flash-warning 1.5s step-end infinite;
}

/* --- Drager Theme Overrides --- */

/* Body & Main Container */
.monitor-page.theme-drager,
.monitor-page.theme-drager body,
.monitor-page.theme-drager html {
    background-color: #e5e7eb !important; /* gray-200 */
    color: #1f2937; /* gray-800 */
}

.monitor-page.theme-drager .monitor-grid {
    background-color: #e5e7eb !important;
    gap: 6px; /* Slightly wider gap for light mode feel */
}

/* Header */
.monitor-page.theme-drager .header {
    background-color: #d1d5db; /* gray-300 */
    border-bottom: 1px solid #9ca3af;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.monitor-page.theme-drager .header-btn {
    background-color: #f3f4f6; /* gray-100 */
    color: #1f2937;
    border: 1px solid #9ca3af;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.monitor-page.theme-drager .header-btn:hover {
    background-color: #e5e7eb;
}

/* Specific Header Buttons colors in Light Mode need to be readable and not clash */
/* Using flat colors or lighter gradients to match the medical equipment aesthetic */
.monitor-page.theme-drager .fullscreen-btn-color {
    background: #e5e7eb; /* gray-200 */
    color: #1f2937; /* gray-800 */
    border-color: #9ca3af;
}
.monitor-page.theme-drager .pacer-btn-color {
    background: #dbeafe; /* blue-100 */
    color: #1e40af; /* blue-800 */
    border-color: #93c5fd;
}
.monitor-page.theme-drager .defib-btn-color {
    background: #fee2e2; /* red-100 */
    color: #991b1b; /* red-800 */
    border-color: #fca5a5;
}
.monitor-page.theme-drager .alarm-silence-btn {
    background: #fef3c7; /* amber-100 */
    color: #92400e; /* amber-800 */
    border-color: #fcd34d;
}
.monitor-page.theme-drager .disconnect-btn-color {
    background: #f3f4f6; /* gray-100 */
    color: #1f2937; /* gray-800 */
    border-color: #9ca3af;
}


/* Waveform Area */
.monitor-page.theme-drager .waveform-container {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
}

.monitor-page.theme-drager .waveform-label {
    color: #374151;
    text-shadow: none;
    font-weight: 700;
}

/* Sidebar Sections */
.monitor-page.theme-drager .monitor-section,
.monitor-page.theme-drager .monitor-section-secondary {
    background-color: #f3f4f6; /* gray-100 */
    border: 1px solid #d1d5db;
}

.monitor-page.theme-drager .monitor-section-title {
    color: #374151;
    border-bottom-color: #d1d5db;
}

.monitor-page.theme-drager .monitor-label {
    color: #4b5563;
}

/* Parameter Boxes/Cards */
.monitor-page.theme-drager .param-box {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #1f2937;
}
.monitor-page.theme-drager .param-box:hover {
    background-color: #f9fafb;
}

.monitor-page.theme-drager .param-card {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    color: #1f2937;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.monitor-page.theme-drager .param-card .param-label {
    color: #4b5563;
}

.monitor-page.theme-drager .param-card .param-unit {
    color: #6b7280;
}

/* Parameter Colors in Light Mode (Darker for contrast) */
.monitor-page.theme-drager .param-card[data-param="pip"] .param-label,
.monitor-page.theme-drager .param-card[data-param="pplat"] .param-label,
.monitor-page.theme-drager .param-card[data-param="map"] .param-label {
    color: #b45309; /* amber-700 (darker yellow) */
}
.monitor-page.theme-drager .param-card[data-param="vte"] .param-label {
    color: #0e7490; /* cyan-700 */
}

/* Sidebar Graph */
.monitor-page.theme-drager #sidebarGraphContainer {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
}

/* Alarm Box */
.monitor-page.theme-drager .alarm-box {
    color: #1f2937;
}
.monitor-page.theme-drager .flashing-red {
    background-color: #ef4444; color: white;
}
.monitor-page.theme-drager .flashing-warning {
    background-color: #f59e0b; color: black;
}

/* Modal adjustments are handled mostly by JS utility classes, but overlays need help */
.monitor-page.theme-drager .modal-overlay {
    background: rgba(0, 0, 0, 0.5); /* Lighter overlay */
}

/* Faded Button (for User Guide) */
.btn-faded {
    background-color: rgba(255, 255, 255, 0.5);
    color: #6b7280; /* gray-500 */
    border-color: #d1d5db; /* gray-300 */
}

.btn-faded:hover {
    background-color: rgba(255, 255, 255, 0.8);
    color: #374151; /* gray-700 */
    border-color: #9ca3af; /* gray-400 */
}

/* --- Advanced Controller Mini Monitor --- */
.mini-monitor-grid {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mini-vital-card {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 50px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.mini-vital-card .label {
    font-size: 0.65rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 2px;
}

.mini-vital-card .value {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    color: #111827;
}

.mini-vital-card .icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.heart-icon {
    background-color: #ef4444;
}

.pulse-animation {
    animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
}

/* Dark Mode for Mini Monitor */
body.dark-mode .mini-vital-card {
    background-color: #1f2937;
    border-color: #374151;
}
body.dark-mode .mini-vital-card .value {
    color: #f3f4f6;
}
body.dark-mode .mini-vital-card .label {
    color: #9ca3af;
}

/* Header updates for Advanced Controller */
.adv-header {
    background-color: white;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.dark-mode .adv-header {
    background-color: #111827;
    border-color: #374151;
}

/* --- Dark Mode Overrides for Modals & Inputs --- */

/* Control Groups in Inspector / Settings */
body.dark-mode .control-group-int {
    background-color: rgba(55, 65, 81, 0.5); /* gray-700 with transparency */
    box-shadow: none; /* Remove light shadow or adjust if needed */
    border: 1px solid #4b5563; /* gray-600 */
}

body.dark-mode .arrest-control-group-int {
    background-color: rgba(127, 29, 29, 0.3); /* red-900 with transparency */
    border: 1px solid #7f1d1d; /* red-900 */
}

/* Modal Content Background */
body.dark-mode .modal-content {
    background-color: #1f2937; /* gray-800 */
    border: 1px solid #374151; /* gray-700 */
    color: #f3f4f6; /* gray-100 */
}

/* Modal Headers & Titles */
body.dark-mode .modal-content h2,
body.dark-mode .modal-content h3,
body.dark-mode .modal-content h4 {
    color: #f3f4f6;
}

/* Close Button */
body.dark-mode .modal-content .icon-btn {
    color: #9ca3af; /* gray-400 */
}
body.dark-mode .modal-content .icon-btn:hover {
    color: #f3f4f6; /* white */
    background-color: #374151; /* gray-700 */
}

/* Special Input Overrides for Inspector */
body.dark-mode .control-input-gray {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
    color: #f3f4f6; /* white */
    box-shadow: none;
}

body.dark-mode .control-input-gray:focus {
    background-color: #4b5563; /* slightly lighter */
    border-color: #60a5fa; /* blue-400 */
    color: white;
}

body.dark-mode .control-select-blue {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
    color: #f3f4f6; /* white */
}

/* Ensure standard inputs are also dark */
body.dark-mode .control-input,
body.dark-mode .control-select,
body.dark-mode .control-textarea {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

/* Hover state for Scenario List in Dark Mode */
body.dark-mode .hover\:bg-gray-100:hover {
    background-color: #374151 !important; /* gray-700 */
}

/* Folder header hover in Dark Mode */
body.dark-mode .folder.group:hover {
    background-color: #374151 !important;
}

/* Scenario Item in Dark Mode */
body.dark-mode .scenario-item:hover {
    background-color: #374151 !important;
}

/* Org Scenario Item in Dark Mode */
body.dark-mode .org-scenario {
    background-color: rgba(30, 58, 138, 0.4); /* blue-900 transparent */
    border-left-color: #3b82f6; /* blue-500 */
}
body.dark-mode .org-scenario:hover {
    background-color: rgba(30, 58, 138, 0.6);
}