/* loader.css */

.spinnerMain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(0.4px);
  background: rgba(0, 0, 0, 0.706);
  z-index: 100002; /* Ensure loader is always on top */
}

.loadingScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loadingScreen__text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: #ddd;
  margin-bottom: 20px;
}

.loadingScreen__text__span {
  display: inline-block;
  padding: 4px;
  animation: charColor 1s infinite ease;
  animation-delay: calc(100ms * var(--i));
}

@keyframes charColor {
  0% {
    color: #f6be00;
  }
  50% {
    color: #da291c;
  }
  100% {
    color: white;
  }
}

.loadingProgress {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 10px;
}

.progressBarContainer {
  width: 80%;
  max-width: 400px;
  background-color: #ddd;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}

.progressBar {
  height: 12px;
  background-color: #4caf50;
  width: 0%;
  transition: width 0.4s ease;
}

@media (max-width: 600px) {
  .loadingScreen__text {
    font-size: 1.5rem;
  }

  .loadingProgress {
    font-size: 1rem;
  }

  .progressBarContainer {
    width: 90%;
  }
}
/* loader.css */

/* Container for the entire progress bar */
.progressBarContainer {
  width: 80%;
  max-width: 400px;
  background-color: #ffffff;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}

.progressBar {
  height: 12px;
  width: 0%;
  background: linear-gradient(90deg, #000000 0%, #323232 50%, #777777 100%);
  border-radius: 3px;
  transition: width 0.4s ease-in-out;
}
.gauge-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gauge {
  /* Smaller size, no full SVG rotation */
}

.gauge-background {
  fill: none;
  stroke: #e6e6e6; /* Light gray background */
}

.gauge-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 5s; /* Slower animation */
  transform: rotate(-90deg); /* Rotate only the gauge circle */
  transform-origin: 50% 50%; /* Set rotation origin to the center of the circle */
}

.gauge-text {
  font-size: 16px; /* Smaller text size to match the smaller gauge */
  fill: #333;
  dominant-baseline: middle; /* Ensure text is vertically aligned */
}

.gauge-svg {
  transform: rotate(-90deg);
}

.gauge-bg,
.gauge-progress {
  fill: none;
}

.gauge-progress {
  transition: stroke-dashoffset 5s ease, stroke 5s ease; /* Slower animation */
}

.gauge-text {
  font-size: 1rem;
  fill: #333;
}
.popover-wrapper {
  position: relative; /* Make sure the wrapper is positioned for absolute positioning inside it */
  display: inline-block;
}

.popover-content {
  z-index: 99999 !important;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none; /* Prevent hover interference */
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.popover-wrapper:hover .popover-content {
  opacity: 1; /* Make popover visible on hover */
  pointer-events: auto; /* Allow interaction */
}

.popover-right {
  top: 50%;
  left: 100%; /* Position the popover to the right */
  margin-left: 8px;
}

.popover-left {
  top: 50%;
  right: 100%; /* Position the popover to the left */
  margin-right: 8px;
}

.popover-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%); /* Center the popover above */
  margin-bottom: 8px;
}

.popover-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%); /* Center the popover below */
  margin-top: 8px;
}

.popover-left-top {
  bottom: 20%;
  right: -10%;
  margin-right: 3px;
}
/* Notes Rich Text Editor Styling */

.notes-editor-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.notes-editor-toolbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #ffffff;
    border-bottom: 1px dashed #e5e7eb;
    gap: 0.25rem;
}

.notes-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: #4b5563;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    background: transparent;
    border: none;
    outline: none;
}

.notes-toolbar-btn:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.notes-toolbar-btn.active {
    background-color: #e5e7eb;
    color: #111827;
}

.notes-toolbar-separator {
    width: 1px;
    height: 1.25rem;
    background-color: #e5e7eb;
    margin: 0 0.5rem;
}

.notes-editor-content,
.notes-view-content {
    white-space: pre-wrap;
}

.notes-editor-content {
    min-height: 120px;
    padding: 1rem;
    outline: none;
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.5;
    word-break: break-word;
}

/* Placeholder Implementation for contentEditable */
.notes-editor-content:empty::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    cursor: text;
    pointer-events: none;
    display: block;
}

.notes-editor-content ul,
.notes-view-content ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 1rem;
    margin: 0.5rem 0;
}

.notes-editor-content ol,
.notes-view-content ol {
    list-style-type: decimal;
    list-style-position: inside;
    padding-left: 1rem;
    margin: 0.5rem 0;
}

.notes-editor-content blockquote,
.notes-view-content blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1rem;
    color: #6b7280;
    margin: 0.5rem 0;
}

.notes-editor-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid #f3f4f6;
    background-color: #f9fafb;
    border-radius: 0 0 8px 8px;
}

.notes-char-count {
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #6b7280;
}

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

.notes-btn-cancel {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.notes-btn-cancel:hover:not(:disabled) {
    background-color: #f9fafb;
    border-color: #c5c9d1;
}

.notes-btn-save {
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #ED1C24;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.notes-btn-save:hover:not(:disabled) {
    background-color: #D1131A;
}

.notes-btn-save:disabled,
.notes-btn-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Accordion transition styles */
.notes-accordion-header {
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    transition: border-radius 0.2s ease;
}

.notes-accordion-header.expanded {
    border-radius: 8px 8px 0 0;
    border-bottom: none;
}