/* General Reset */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



/* Mobile-First Body Styles - DARK MODE */

body {

  background-color: #121212;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  color: #e0e0e0;

  line-height: 1.5;

  padding: 0 4vw;

  min-height: 100vh;

}



/* Mobile Dashboard Layout - DARK */

.dashboard {

  background-color: #1b1b1b;

  border-radius: 16px;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  padding: 1.5rem 1rem;

  width: 100%;

  margin: 1rem auto;

  transition: transform 0.25s ease-in-out;

}



/* Dashboard Scale Wrapper - DARK */

.dashboard-scale-wrapper {

  display: inline-block;

  transform-origin: top center;

  transition: transform 0.25s ease;

  width: 100%;

}



/* Prevent overlapping of next sections */

.dashboard-container {

  position: relative;

  z-index: 1;

  margin-bottom: 4rem;

}



/* Updated Mobile Vital Box - Horizontal layout */

.vital-box {

  background-color: none;

  display: flex;

  flex-direction: row;

  padding: 0;

  align-items: stretch;

  gap: 0.5rem;

  /* Reduced gap */

  width: 100%;

}



/* Updated Mobile Vital Info - Left side - DARK - 20% width */

.vital-info {

  display: flex;

  flex-direction: column;

  border-radius: 12px;

  width: 20%;

  /* Fixed at 20% */

  min-height: 160px;

  background-color: rgba(0, 0, 0, 0.5);

  justify-content: space-between;

  padding: 0.6rem 0.5rem;

  /* Reduced padding */

  order: 1;

  border: 1px solid #333;

}



/* Updated Mobile Chart Wrapper - Right side - DARK - 80% width */

.chart-wrapper {

  position: relative;

  font-family: Arial, Helvetica, sans-serif;

  width: 80%;

  /* Fixed at 80% */

  height: 160px;

  overflow: hidden;

  order: 2;

  background-color: #121212;

  border-radius: 12px;

  border: 1px solid #333;

}



/* Reduced font sizes for vital values to fit narrower 20% width */

.vital-header {

  font-size: 0.75rem;

  /* Reduced */

  color: #ffffff;

  margin-bottom: 0.3rem;

  /* Reduced margin */

}



/* Mobile Vital Value - DARK */

.vital-value {

  font-size: 1rem;

  /* Reduced for narrower width */

  font-weight: bold;

  margin-bottom: 0.3rem;

  /* Reduced margin */

  color: #ffffff;

  line-height: 1.2;

}



/* Special styling for BP value to display vertically in narrow container */

#bp-value {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0.1rem;

}



#bp-value span {

  display: block;

  line-height: 1;

  font-size: 0.95rem;

  /* Slightly smaller for BP */

}



/* RR Container for DARK mode */

.vital-rr-container {

  display: flex;

  align-items: baseline;

  gap: 3px;

  /* Reduced gap */

  margin-top: 4px;

  /* Reduced margin */

}



.vital-labelrr {

  font-size: 0.6rem;

  /* Reduced */

  color: #aaa;

  font-weight: 600;

}



.vital-valuerr {

  font-size: 0.7rem;

  /* Reduced */

  font-weight: bold;

  color: #ffffff;

}



/* Container for graph elements */

.vital-container {

  display: flex;

  flex-direction: column;

  height: 100%;

}



/* Mobile Graph Name - DARK */

.graph-name,

.vital-graph-label {

  font-size: 0.65rem;

  /* Reduced */

  color: #888;

  margin-top: auto;

  padding-top: 6px;

  /* Reduced padding */

}



/* If you want both to be at the bottom as a group */

.vital-bottom-group {

  margin-top: auto;

  display: flex;

  flex-direction: column;

  gap: 4px;

  /* Reduced */

}



/* Mobile Canvas Graph - DARK */

canvas {

  display: block !important;

  width: 100% !important;

  height: 160px !important;

  background-color: #121212;

  border-radius: 12px;

}



/* Unique Value Colors - DARK MODE VIBRANT */

.green {

  color: #4CAF50;

}



.yellow {

  color: #FFC107;

}



.red {

  color: #F44336;

}



.orange {

  color: #FF9800;

}



/* Mobile ETCO2 Specific Styles - DARK */

.vital-header-row {

  display: flex;

  justify-content: space-between;

  gap: 0.4rem;

  /* Reduced */

  margin-top: 0.2rem;

  /* Reduced */

}



.vital-label-group {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}



.vital-label {

  font-size: 0.55rem;

  /* Reduced */

  font-weight: 600;

  color: #aaa;

  margin-bottom: 0.1rem;

  /* Reduced */

}



/* Mobile Sweep Bar - DARK BACKGROUND */

.sweep-bar {
  position: absolute;
  top: 0;
  left: 0%;
  width: 1.25%;
  height: 100%;
  background-color: #121212;
  animation: sweepGap 6s linear infinite;
  animation-delay: 6s;
  z-index: 2;
  pointer-events: none;
}



/* Mobile Reveal Bar - DARK BACKGROUND */

.reveal-bar {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: #121212;
  animation: revealGraph 6s linear forwards;
  animation-delay: 0s;
  z-index: 3;
  pointer-events: none;
}

@keyframes revealGraph {
  from {
    left: 0%;
  }

  to {
    left: 100%;
  }
}



/* Mobile ETCO2-specific Animations - DARK */

.sweep-bar-etco2 {
  position: absolute;
  top: 0;
  left: 0%;
  width: 1.25%;
  height: 100%;
  background-color: #121212;
  animation: sweepGap 6s linear infinite;
  animation-delay: 6s;
  z-index: 2;
  pointer-events: none;
}



.reveal-bar-etco2 {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: #121212;
  animation: revealGraph 6s linear forwards;
  animation-delay: 0s;
  z-index: 3;
  pointer-events: none;
}



@keyframes sweepGap {
  0% {
    left: 0%;
  }

  100% {
    left: 100%;
  }
}



/* Reveal animation */

@keyframes revealGraph {
  from {
    left: 0%;
  }

  to {
    left: 100%;
  }
}

@keyframes sweepETCO2 {
  0% {
    left: 0%;
  }

  100% {
    left: 100%;
  }
}

@keyframes revealETCO2 {
  from {
    left: 0%;
  }

  to {
    left: 100%;
  }
}



/* Mobile Button Container */

.button-container {

  position: relative;

  z-index: 10;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 1rem;

  margin-top: 2rem;

  margin-bottom: 3rem;

  width: 100%;

}



/* Mobile Button Styles - DARK THEME */

.left-button,

.right-button {

  padding: 1rem 2rem;

  border: none;

  border-radius: 8px;

  color: #fff;

  cursor: pointer;

  font-size: 1rem;

  font-weight: 500;

  transition: all 0.3s ease;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

  width: 100%;

  max-width: 280px;

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Mobile Button Colors (Red and Navy Blue) */

.left-button {

  background-color: #F90618;

  /* Accent Red */

}



.right-button {

  background-color: #2E3192;

  /* Primary Action Navy Blue */

}



/* Mobile Hover Effects - DARK */

.left-button:hover {

  background-color: #d10515;

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);

}



.right-button:hover {

  background-color: #24277b;

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);

}



/* Mobile Popup Overlay - DARK */

.popup-overlay {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(10, 10, 10, 0.9);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 999;

  padding: 1rem;

}



.popup-content {
  background: linear-gradient(135deg, #121212, #1e1e1e);
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  color: #f0f0f0;
  font-family: 'Segoe UI', sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #333;
  position: relative;
  /* Essential for absolute positioning of children like the Close Icon */
  overflow: visible;
}

.popup-content h2 {
  font-size: 1.1rem;
  padding: 12px 45px 12px 10px;
  /* Large RIGHT padding */
  /* Clear space for the close icon */
  margin-bottom: 1.5rem;
  display: block;
  word-wrap: break-word;
}

/* Close "X" Button Styles */
.popup-close-icon {
  position: absolute;
  top: 10px;
  right: 15px;
  /* Right aligned */
  left: auto;
  background: none !important;
  border: none !important;
  font-size: 32px;
  line-height: 1;
  color: #95a5a6;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 2005;
  padding: 0;
  margin: 0;
  box-shadow: none !important;
}

.popup-close-icon:hover {
  color: #e74c3c !important;
  /* Red on hover */
  transform: scale(1.15);
  background: none !important;
}



/* Heartbeat animation - DARK */

.popup-content:hover {

  animation: heartbeat 0.75s 1;

}



@keyframes heartbeat {

  0% {

    transform: scale(1);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  }



  50% {

    transform: scale(1.03);

    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);

  }



  100% {

    transform: scale(1);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  }

}



/* Mobile Size Controls - DARK */

.size-controls {

  margin: 1.5rem 0;

}



.size-controls button {

  font-size: 1.2rem;

  margin: 0 0.5rem;

  padding: 0.75rem 1.5rem;

  border: none;

  border-radius: 10px;

  background: #00e676;

  color: #111;

  font-weight: bold;

  cursor: pointer;

  transition: transform 0.2s ease, background 0.3s ease;

  min-height: 44px;

}



.size-controls button:hover {

  transform: scale(1.1);

  background: #00c853;

}



.close-popup {

  margin-top: 1.5rem;

  padding: 0.75rem 1.5rem;

  background: #2c2c2c;

  color: #fff;

  border: none;

  border-radius: 8px;

  font-weight: 500;

  cursor: pointer;

  transition: background 0.3s ease;

  width: 100%;

  min-height: 44px;

}



.close-popup:hover {
  background: #444;
}

/* Perfect Cross Styles */
.close-icon-top {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 8px;
  line-height: 0;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.close-icon-top svg {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

.close-icon-top:hover {
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.1);
  transform: scale(1.1);
}

.close-icon-top:hover svg {
  transform: rotate(90deg);
}



/* Mobile Graph Toggle Buttons - DARK */

.toggle-graph-buttons {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  margin-top: 1.5rem;

}



.toggle-btn {

  padding: 0.75rem 1rem;

  border: none;

  border-radius: 8px;

  color: #fff;

  font-size: 0.9rem;

  cursor: pointer;

  transition: background-color 0.3s ease, transform 0.2s ease;

  background-color: #388e3c;

  min-height: 44px;

  width: 100%;

}



.toggle-btn:hover {

  transform: scale(1.05);

}



/* Mobile Floating Zoom Controls - DARK */

.floating-zoom-controls {

  position: fixed;

  bottom: 1rem;

  right: 1rem;

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  z-index: 9999;

}



.floating-zoom-controls button {

  background: linear-gradient(145deg, #1c1c1c, #2a2a2a);

  color: #e0e0e0;

  border: 1px solid #333;

  border-radius: 10px;

  font-size: 1.125rem;

  font-weight: 600;

  width: 44px;

  height: 44px;

  cursor: pointer;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6),

    inset 0 1px 2px rgba(255, 255, 255, 0.1);

  transition: all 0.25s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



.floating-zoom-controls button:hover {

  background: linear-gradient(145deg, #2e2e2e, #3a3a3a);

  color: #F90618;

  transform: scale(1.08);

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7),

    inset 0 1px 3px rgba(255, 255, 255, 0.1);

}



.floating-zoom-controls button:active {

  transform: scale(0.92);

  background: linear-gradient(145deg, #1a1a1a, #242424);

  color: #2E3192;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8),

    inset 0 2px 4px rgba(0, 0, 0, 0.6);

}



/* Hide element */

.hidden {

  display: none;

}



/* ==========================================================

SMALL MOBILE OPTIMIZATIONS (≤480px) - DARK

========================================================== */

@media (max-width: 480px) {

  body {

    padding: 0 3vw;

  }



  .dashboard {

    padding: 1.25rem 0.75rem;

    border-radius: 14px;

    gap: 1.25rem;

  }



  .vital-box {

    gap: 0.4rem;

    /* Reduced gap */

  }



  .vital-info {

    width: 20%;

    /* Fixed at 20% */

    min-height: 140px;

    padding: 0.5rem 0.4rem;

    /* Reduced padding */

  }



  .chart-wrapper {

    width: 80%;

    /* Fixed at 80% */

    height: 140px;

  }



  canvas {

    height: 140px !important;

  }



  .vital-header {

    font-size: 0.7rem;

    /* Reduced */

  }



  .vital-value {

    font-size: 0.95rem;

    /* Reduced for narrow width */

  }



  #bp-value span {

    font-size: 0.9rem;

    /* Slightly smaller for BP */

  }



  .vital-labelrr {

    font-size: 0.55rem;

    /* Reduced */

  }



  .vital-valuerr {

    font-size: 0.65rem;

    /* Reduced */

  }



  .graph-name,

  .vital-graph-label {

    font-size: 0.6rem;

    /* Reduced */

  }



  .vital-label {

    font-size: 0.5rem;

    /* Reduced */

  }



  .button-container {

    margin-top: 1.5rem;

    margin-bottom: 2rem;

    gap: 0.75rem;

  }



  .left-button,

  .right-button {

    padding: 0.9rem 1.5rem;

    font-size: 0.9rem;

    max-width: 260px;

    min-height: 44px;

  }



  .popup-content {

    padding: 1.25rem;

    max-width: 280px;

  }



  .size-controls button {

    font-size: 1.1rem;

    padding: 0.6rem 1.25rem;

    min-height: 40px;

  }



  .toggle-btn {

    padding: 0.6rem 0.9rem;

    font-size: 0.85rem;

    min-height: 40px;

  }



  .floating-zoom-controls {

    bottom: 0.75rem;

    right: 0.75rem;

  }



  .floating-zoom-controls button {

    width: 40px;

    height: 40px;

    font-size: 1rem;

  }

}



/* ==========================================================

VERY SMALL MOBILE OPTIMIZATIONS (≤360px) - DARK

========================================================== */

@media (max-width: 360px) {

  body {

    padding: 0 2vw;

  }



  .dashboard {

    padding: 1rem 0.5rem;

    border-radius: 12px;

    gap: 1rem;

  }



  .vital-box {

    gap: 0.3rem;

    /* Reduced gap */

  }



  .vital-info {

    width: 20%;

    /* Fixed at 20% */

    min-height: 120px;

    padding: 0.4rem 0.3rem;

    /* Further reduced padding */

  }



  .chart-wrapper {

    width: 80%;

    /* Fixed at 80% */

    height: 120px;

  }



  canvas {

    height: 120px !important;

  }



  .vital-header {

    font-size: 0.65rem;

    /* Reduced */

  }



  .vital-value {

    font-size: 0.85rem;

    /* Reduced for very narrow width */

  }



  #bp-value {

    gap: 0.05rem;

    /* Minimal gap for BP values */

  }



  #bp-value span {

    font-size: 0.85rem;

    /* Smaller for BP */

  }



  .vital-labelrr {

    font-size: 0.5rem;

    /* Reduced */

  }



  .vital-valuerr {

    font-size: 0.6rem;

    /* Reduced */

  }



  .graph-name,

  .vital-graph-label {

    font-size: 0.55rem;

    /* Reduced */

  }



  .vital-label {

    font-size: 0.45rem;

    /* Reduced */

  }



  .button-container {

    margin-top: 1.25rem;

    margin-bottom: 1.5rem;

  }



  .left-button,

  .right-button {

    padding: 0.8rem 1.25rem;

    font-size: 0.85rem;

    max-width: 240px;

    min-height: 42px;

  }



  .popup-content {

    padding: 1rem;

    max-width: 260px;

  }



  .size-controls button {

    font-size: 1rem;

    padding: 0.5rem 1rem;

    min-height: 38px;

    margin: 0 0.25rem;

  }



  .toggle-btn {

    padding: 0.5rem 0.75rem;

    font-size: 0.8rem;

    min-height: 38px;

  }



  .floating-zoom-controls {

    bottom: 0.5rem;

    right: 0.5rem;

  }



  .floating-zoom-controls button {

    width: 36px;

    height: 36px;

    font-size: 0.9rem;

  }

}



/* ==========================================================

LANDSCAPE ORIENTATION SUPPORT - DARK

========================================================== */

@media (max-width: 768px) and (orientation: landscape) {

  .dashboard {

    padding: 1rem;

    gap: 1rem;

  }



  .vital-box {

    gap: 0.8rem;

    /* Slightly larger gap for landscape */

  }



  .vital-info {

    width: 20%;

    /* Fixed at 20% */

    min-height: 140px;

  }



  .chart-wrapper {

    width: 80%;

    /* Fixed at 80% */

    height: 140px;

  }



  canvas {

    height: 140px !important;

  }



  /* Slightly larger fonts for landscape */

  .vital-header {

    font-size: 0.8rem;

  }



  .vital-value {

    font-size: 1rem;

  }



  .button-container {

    flex-direction: row;

    gap: 1rem;

    margin-top: 1.5rem;

    margin-bottom: 2rem;

  }



  .left-button,

  .right-button {

    width: auto;

    flex: 1;

    max-width: none;

    padding: 0.8rem 1rem;

  }

}



/* ==========================================================

TABLET OPTIMIZATIONS (769px - 1024px) - DARK

========================================================== */

@media (min-width: 769px) and (max-width: 1024px) {

  .dashboard {

    max-width: 90%;

    padding: 2rem 1.5rem;

    gap: 2rem;

  }



  .vital-info {

    width: 20%;

    /* Fixed at 20% */

    min-height: 180px;

    padding: 1rem;

    /* Reduced padding */

  }



  .chart-wrapper {

    width: 80%;

    /* Fixed at 80% */

    height: 180px;

  }



  canvas {

    height: 180px !important;

  }



  .vital-header {

    font-size: 0.9rem;

    /* Slightly reduced */

  }



  .vital-value {

    font-size: 1.6rem;

    /* Slightly reduced but still readable */

  }



  #bp-value span {

    font-size: 1.6rem;

    /* Slightly reduced for BP */

  }



  .vital-labelrr {

    font-size: 0.75rem;

    /* Slightly reduced */

  }



  .vital-valuerr {

    font-size: 0.9rem;

    /* Slightly reduced */

  }



  .graph-name,

  .vital-graph-label {

    font-size: 0.8rem;

    /* Slightly reduced */

  }



  .button-container {

    flex-direction: row;

    gap: 2rem;

  }



  .left-button,

  .right-button {

    max-width: 200px;

  }

}



/* ==========================================================

LARGE SCREENS (1025px and above) - DARK

========================================================== */

@media (min-width: 1025px) {

  .dashboard {

    max-width: 1200px;

    padding: 2.5rem 2rem;

    gap: 2.5rem;

  }



  .vital-info {

    width: 20%;

    /* Fixed at 20% */

    min-height: 200px;

    padding: 1.25rem;

  }



  .chart-wrapper {

    width: 80%;

    /* Fixed at 80% */

    height: 200px;

  }



  canvas {

    height: 200px !important;

  }



  .vital-header {

    font-size: 1rem;

  }



  .vital-value {

    font-size: 1.8rem;

  }



  #bp-value span {

    font-size: 1.8rem;

  }



  .vital-labelrr {

    font-size: 0.85rem;

  }



  .vital-valuerr {

    font-size: 1rem;

  }



  .graph-name,

  .vital-graph-label {

    font-size: 0.9rem;

  }

}



/* QR Section - DARK */

.resus-session-id-qr-section {

  position: relative;

  z-index: 20;

  background: #1a1a1a;

  margin-top: 2rem;

  border: 1px solid #333;

  border-radius: 12px;

  padding: 20px;

}



.resus-session-id-qr-section::before {

  background: #F90618;

}



.resus-session-id-current span {

  color: #2E3192;

  background: rgba(46, 49, 146, 0.1);

  padding: 5px 10px;

  border-radius: 6px;

  font-weight: 600;

}



/* ==========================================================

ACCESSIBILITY & TOUCH OPTIMIZATIONS - DARK

========================================================== */

@media (hover: none) and (pointer: coarse) {



  .left-button:hover,

  .right-button:hover,

  .toggle-btn:hover,

  .size-controls button:hover,

  .floating-zoom-controls button:hover {

    transform: none;

  }



  .left-button:active,

  .right-button:active,

  .toggle-btn:active,

  .size-controls button:active,

  .floating-zoom-controls button:active {

    transform: scale(0.95);

  }

}



/* Reduced motion for accessibility */

@media (prefers-reduced-motion: reduce) {



  .dashboard,

  .popup-content,

  .left-button,

  .right-button,

  .toggle-btn,

  .size-controls button,

  .floating-zoom-controls button {

    transition: none !important;

  }



  .sweep-bar,

  .reveal-bar,

  .sweep-bar-etco2,

  .reveal-bar-etco2 {

    animation: none !important;

  }



  .popup-content:hover {

    animation: none !important;

  }

}



/* Ensure proper touch targets */

.left-button,

.right-button,

.toggle-btn,

.size-controls button,

.close-popup,

.floating-zoom-controls button {

  min-height: 44px;

}



/* Safe area insets for notched devices - DARK */

@supports(padding: max(0px)) {

  body {

    padding-left: max(1rem, env(safe-area-inset-left));

    padding-right: max(1rem, env(safe-area-inset-right));

  }



  .floating-zoom-controls {

    bottom: max(1rem, env(safe-area-inset-bottom));

    right: max(1rem, env(safe-area-inset-right));

  }

}