/* base document */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: var(--clr-surface-a0);
  color: var(--clr-light-a0);
}

/* small helpers */
.logo-img {
  width: 10em;
  height: auto;
}

input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
  margin: 0;
}

/* Base responsive variables */
:root {
  --sidebar-min-width: 25rem;
  /* minimum width */
  --sidebar-default-lg: 30vw;
  /* default for large screens */

  /** Base colors */
  --clr-dark-a0: #0f0f0f;
  --clr-light-a0: #ebebeb;

  /** Theme primary colors */
  --clr-primary-a0: #8578ff;
  --clr-primary-a10: #9586ff;
  --clr-primary-a20: #a495ff;
  --clr-primary-a30: #b3a3ff;
  --clr-primary-a40: #c0b2ff;
  --clr-primary-a50: #cec1ff;

  /** Theme surface colors */
  --clr-surface-a0: #191920;
  --clr-surface-a10: #24242b;
  --clr-surface-a20: #39393f;
  --clr-surface-a30: #525257;
  --clr-surface-a40: #6c6c71;
  --clr-surface-a50: #88888b;

  /** Success colors */
  --clr-success-a0: #22946e;
  --clr-success-a10: #47d5a6;
  --clr-success-a20: #9ae8ce;

  /** Warning colors */
  --clr-warning-a0: #a87a2a;
  --clr-warning-a10: #d7ac61;
  --clr-warning-a20: #ecd7b2;

  /** Danger colors */
  --clr-danger-a0: #9c2121;
  --clr-danger-a10: #d94a4a;
  --clr-danger-a20: #eb9e9e;

  /** Info colors */
  --clr-info-a0: #21498a;
  --clr-info-a10: #4077d1;
  --clr-info-a20: #92b2e5;
}

/* ============================================
   COLOR UTILITY CLASSES
   Add these after your :root variables
   ============================================ */

/* BASE COLORS - Background */
.bg-dark {
  background-color: var(--clr-dark-a0) !important;
}

.bg-light {
  background-color: var(--clr-light-a0) !important;
}

/* BASE COLORS - Text */
.text-dark {
  color: var(--clr-dark-a0) !important;
}

.text-light {
  color: var(--clr-light-a0) !important;
}

/* BASE COLORS - Border */
.border-dark {
  border-color: var(--clr-dark-a0) !important;
}

.border-light {
  border-color: var(--clr-light-a0) !important;
}

/* PRIMARY COLORS - Background */
.bg-primary-a0 {
  background-color: var(--clr-primary-a0) !important;
}

.bg-primary-a10 {
  background-color: var(--clr-primary-a10) !important;
}

.bg-primary-a20 {
  background-color: var(--clr-primary-a20) !important;
}

.bg-primary-a30 {
  background-color: var(--clr-primary-a30) !important;
}

.bg-primary-a40 {
  background-color: var(--clr-primary-a40) !important;
}

.bg-primary-a50 {
  background-color: var(--clr-primary-a50) !important;
}

/* PRIMARY COLORS - Text */
.text-primary-a0 {
  color: var(--clr-primary-a0) !important;
}

.text-primary-a10 {
  color: var(--clr-primary-a10) !important;
}

.text-primary-a20 {
  color: var(--clr-primary-a20) !important;
}

.text-primary-a30 {
  color: var(--clr-primary-a30) !important;
}

.text-primary-a40 {
  color: var(--clr-primary-a40) !important;
}

.text-primary-a50 {
  color: var(--clr-primary-a50) !important;
}

/* PRIMARY COLORS - Border */
.border-primary-a0 {
  border-color: var(--clr-primary-a0) !important;
}

.border-primary-a10 {
  border-color: var(--clr-primary-a10) !important;
}

.border-primary-a20 {
  border-color: var(--clr-primary-a20) !important;
}

.border-primary-a30 {
  border-color: var(--clr-primary-a30) !important;
}

.border-primary-a40 {
  border-color: var(--clr-primary-a40) !important;
}

.border-primary-a50 {
  border-color: var(--clr-primary-a50) !important;
}

/* SURFACE COLORS - Background */
.bg-surface-a0 {
  background-color: var(--clr-surface-a0) !important;
}

.bg-surface-a10 {
  background-color: var(--clr-surface-a10) !important;
}

.bg-surface-a20 {
  background-color: var(--clr-surface-a20) !important;
}

.bg-surface-a30 {
  background-color: var(--clr-surface-a30) !important;
}

.bg-surface-a40 {
  background-color: var(--clr-surface-a40) !important;
}

.bg-surface-a50 {
  background-color: var(--clr-surface-a50) !important;
}

/* SURFACE COLORS - Text */
.text-surface-a0 {
  color: var(--clr-surface-a0) !important;
}

.text-surface-a10 {
  color: var(--clr-surface-a10) !important;
}

.text-surface-a20 {
  color: var(--clr-surface-a20) !important;
}

.text-surface-a30 {
  color: var(--clr-surface-a30) !important;
}

.text-surface-a40 {
  color: var(--clr-surface-a40) !important;
}

.text-surface-a50 {
  color: var(--clr-surface-a50) !important;
}

/* SURFACE COLORS - Border */
.border-surface-a0 {
  border-color: var(--clr-surface-a0) !important;
}

.border-surface-a10 {
  border-color: var(--clr-surface-a10) !important;
}

.border-surface-a20 {
  border-color: var(--clr-surface-a20) !important;
}

.border-surface-a30 {
  border-color: var(--clr-surface-a30) !important;
}

.border-surface-a40 {
  border-color: var(--clr-surface-a40) !important;
}

.border-surface-a50 {
  border-color: var(--clr-surface-a50) !important;
}


/* SUCCESS COLORS - Background */
.bg-success-a0 {
  background-color: var(--clr-success-a0) !important;
}

.bg-success-a10 {
  background-color: var(--clr-success-a10) !important;
}

.bg-success-a20 {
  background-color: var(--clr-success-a20) !important;
}

/* SUCCESS COLORS - Text */
.text-success-a0 {
  color: var(--clr-success-a0) !important;
}

.text-success-a10 {
  color: var(--clr-success-a10) !important;
}

.text-success-a20 {
  color: var(--clr-success-a20) !important;
}

/* SUCCESS COLORS - Border */
.border-success-a0 {
  border-color: var(--clr-success-a0) !important;
}

.border-success-a10 {
  border-color: var(--clr-success-a10) !important;
}

.border-success-a20 {
  border-color: var(--clr-success-a20) !important;
}

/* WARNING COLORS - Background */
.bg-warning-a0 {
  background-color: var(--clr-warning-a0) !important;
}

.bg-warning-a10 {
  background-color: var(--clr-warning-a10) !important;
}

.bg-warning-a20 {
  background-color: var(--clr-warning-a20) !important;
}

/* WARNING COLORS - Text */
.text-warning-a0 {
  color: var(--clr-warning-a0) !important;
}

.text-warning-a10 {
  color: var(--clr-warning-a10) !important;
}

.text-warning-a20 {
  color: var(--clr-warning-a20) !important;
}

/* WARNING COLORS - Border */
.border-warning-a0 {
  border-color: var(--clr-warning-a0) !important;
}

.border-warning-a10 {
  border-color: var(--clr-warning-a10) !important;
}

.border-warning-a20 {
  border-color: var(--clr-warning-a20) !important;
}

/* DANGER COLORS - Background */
.bg-danger-a0 {
  background-color: var(--clr-danger-a0) !important;
}

.bg-danger-a10 {
  background-color: var(--clr-danger-a10) !important;
}

.bg-danger-a20 {
  background-color: var(--clr-danger-a20) !important;
}

/* DANGER COLORS - Text */
.text-danger-a0 {
  color: var(--clr-danger-a0) !important;
}

.text-danger-a10 {
  color: var(--clr-danger-a10) !important;
}

.text-danger-a20 {
  color: var(--clr-danger-a20) !important;
}

/* DANGER COLORS - Border */
.border-danger-a0 {
  border-color: var(--clr-danger-a0) !important;
}

.border-danger-a10 {
  border-color: var(--clr-danger-a10) !important;
}

.border-danger-a20 {
  border-color: var(--clr-danger-a20) !important;
}

/* INFO COLORS - Background */
.bg-info-a0 {
  background-color: var(--clr-info-a0) !important;
}

.bg-info-a10 {
  background-color: var(--clr-info-a10) !important;
}

.bg-info-a20 {
  background-color: var(--clr-info-a20) !important;
}

/* INFO COLORS - Text */
.text-info-a0 {
  color: var(--clr-info-a0) !important;
}

.text-info-a10 {
  color: var(--clr-info-a10) !important;
}

.text-info-a20 {
  color: var(--clr-info-a20) !important;
}

/* INFO COLORS - Border */
.border-info-a0 {
  border-color: var(--clr-info-a0) !important;
}

.border-info-a10 {
  border-color: var(--clr-info-a10) !important;
}

.border-info-a20 {
  border-color: var(--clr-info-a20) !important;
}

/* ============================================
   END COLOR UTILITY CLASSES
   ============================================ */

/* Charts tabs */
[data-tab-content] {
  display: none
}

.active[data-tab-content] {
  display: block;
}

.tabs {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  padding: 10px;
}

.tab {
  color: #8578ff;
  border: 1px solid #8578ff;
  border-radius: 30px;
  cursor: pointer;
  padding: 10px;
  font-weight: bold;
}

.tab.active {
  background-color: #8578ff;
  border-radius: 30px;
  color: white;
}

.tab:hover {
  background-color: #8578ff;
  color: white;
}

/* REC dot */
.rec-dot {
  width: 12px;
  height: 12px;
  background-color: #dc3545;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  animation: pulse-red 1.5s infinite ease-in-out;
}

@keyframes pulse-red {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }

  70% {
    opacity: 0.8;
    transform: scale(1.1);
    box-shadow: 0 0 5px 4px rgba(220, 53, 69, 0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

/* Sidebar + overlay styles */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--sidebar-default-lg);
  min-width: var(--sidebar-min-width);
  transform: translateX(100%);
  /* off-screen when closed */
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
  z-index: 1200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  background-color: var(--clr-surface-a10);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.10);
}

/* visible when open */
.sidebar.open {
  transform: translateX(0);
}

.closed {
  box-shadow: none;
}

/* Overlay that darkens the page */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease;
  z-index: 1100;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Toggle button bottom-right, safe-area aware */
.sidebar-toggle-btn {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  font-size: 2rem;
  z-index: 1300;
  border-radius: 999px;
  padding: 0.45rem;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transition: transform 220ms ease, opacity 220ms ease, visibility 220ms;
  -webkit-tap-highlight-color: transparent;
  ;
}

/* smaller on very small screens */
@media (max-width: 420px) {
  .sidebar-toggle-btn {
    width: 44px;
    height: 44px;
    padding: 0.25rem;
  }
}

/* Hidden state for the toggle (when sidebar is open) */
.sidebar-toggle-btn.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Close button inside sidebar */
.sidebar .close-btn {
  border: none;
  font-size: 1.4rem;
  line-height: 1;
}

@media (min-width: 992px) {
  :root {
    --sidebar-default-lg: 30vw;
  }
}

/* On very small screens, sidebar becomes full width */
@media (max-width: 575.98px) {
  .sidebar {
    width: 100vw;
    min-width: 100vw;
  }
}

/* Chart / card helper classes (kept intact in case used elsewhere) */
.uplot-responsive {
  width: 100%;
  height: 35vh;
  min-height: 20vh;
  transform: translateZ(0);
  will-change: transform;
}

.card {
  border-radius: 1rem;
  overflow: visible;
}

.card-header {
  height: 3rem;
}

.card-body {
  background-color: #000000;
}

.chart-legend {
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  justify-content: flex-start;
  color: var(--clr-light-a0);
}

.chart-legend .u-series {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.chart-legend .u-label {
  font-weight: 500;
}

.chart-legend-2lines {
  height: 3rem;
}

/* Responsive height for short viewports */
@media (max-height: 576px) {
  .uplot-responsive {
    height: 65vh;
  }
}

/* Telemetry title styling */
.title-text {
  color: var(--clr-light-a0) !important;
}

.text-shadow {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

/* Card styling with custom colors */
.card {
  border-radius: 1rem;
  overflow: hidden;
  /* Changed from visible to hidden */
  background-color: var(--clr-surface-a20) !important;
  border: 2px solid var(--clr-surface-a30) !important;
  /* Made border thicker and slightly different color */
}

.card-header {
  height: 3rem;
  background-color: var(--clr-surface-a20) !important;
  border-bottom: 1px solid var(--clr-surface-a30) !important;
  color: var(--clr-light-a0) !important;
}

.card-body {
  background-color: var(--clr-surface-a10) !important;
}

/* Error Popup Styling */
#errorPopup .modal-content {
  border: 3px solid var(--clr-danger-a10);
  box-shadow: 0 0 20px rgba(217, 74, 74, 0.5);
  animation: pulse-border 0.5s infinite;
  border-radius: 0.5rem !important;
  overflow: hidden;
}

#errorPopup .modal-header {
  border-bottom: 2px solid var(--clr-danger-a10);
  background-color: var(--clr-danger-a10);
  margin: 0;
  padding: 1rem;
  border-radius: 0 !important;
}

#errorPopup .modal-body {
  font-size: 1.1rem;
  border-radius: 0 !important;
}

#errorPopup .modal-body p {
  margin-bottom: 0.75rem;
}

#errorPopup .modal-body strong {
  color: #ffc107;
  min-width: 120px;
  display: inline-block;
}

@keyframes pulse-border {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(217, 74, 74, 0.5);
  }

  50% {
    box-shadow: 0 0 30px rgba(217, 74, 74, 0.8);
  }
}

/* Home Dashboard - Custom Plots */

.plot-card {
  transition: transform 0.2s ease;
}

.plot-card:hover {
  transform: translateY(-2px);
}

.plot-actions {
  display: flex;
  gap: 0.5rem;
}

.metric-dropdowns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metric-dropdowns select {
  background-color: var(--clr-surface-a10);
  color: var(--clr-light-a0);
  border-color: var(--clr-surface-a30);
}

.metric-dropdowns select:focus {
  background-color: var(--clr-surface-a20);
  border-color: var(--clr-primary-a0);
  color: var(--clr-light-a0);
}

.save-plot-btn {
  width: 100%;
  background-color: var(--clr-primary-a0);
}

.save-plot-btn:hover {
  background-color: var(--clr-primary-a10) !important;
}

.save-plot-btn:disabled {
  opacity: 0.5;
  background-color: var(--clr-primary-a0);
  cursor: not-allowed;
}

.edit-plot-btn {
  color: white;
}

.edit-plot-btn:hover {
  color: black !important;
}

/* Bootstrap icon support - Cleaned up to use webfont */
.bi {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.plot-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.delete-plot-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
}

.delete-plot-btn:hover {
  background-color: #ff4444 !important;
  border-color: #ff4444 !important;
  color: white !important;
}

.delete-plot-btn i {
  font-size: 14px;
  line-height: 1;
}

/* Fix dropdown text visibility */
.metric-dropdowns select {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.95rem;
  background-color: white !important;
  color: #222 !important;
  border: 1px solid #ccc;
  margin-bottom: 12px !important;
  cursor: pointer;
  width: 100%;
}

.metric-dropdowns select:disabled {
  background-color: #f0f0f0 !important;
  color: #000 !important;
  opacity: 1;
  -webkit-text-fill-color: #000 !important;
  border-color: #bbb;
  cursor: default;
}

/* Main Add Plot Button */
.add-plot-main-btn {
  min-height: 400px;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  background-color: var(--clr-surface-a10);
  border-color: var(--clr-surface-a30);
  color: var(--clr-light-a0);
}

.add-plot-main-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background-color: var(--clr-surface-a20);
  border-color: var(--clr-primary-a0);
  color: var(--clr-light-a0);
}

.chart-container {
  min-height: 300px;
  position: relative;
}