/* --- From: dashboard.html --- */
body {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600; /* Medium weight */
}

.sidebar-scroll::-webkit-scrollbar {
  width: 5px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background-color: #1e293b;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: #475569;
  border-radius: 10px;
}

/* --- From: learning_builder.html --- */
/* Custom properties for the slider progress */
:root {
  --slider-color: #d1d5db; /* gray-300 */
  --slider-thumb-color: #ffffff;
  --slider-progress-color: #22c55e; /* green-500 */
}
.dark {
  --slider-color: #4b5563; /* dark:gray-600 */
  --slider-thumb-color: #1f2937; /* dark:gray-800 */
}
/* General styling for the range input */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: transparent;
  cursor: pointer;
}
/* Track styling for Webkit browsers (Chrome, Safari) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    var(--slider-progress-color) var(--progress-percent, 0%),
    var(--slider-color) var(--progress-percent, 0%)
  );
}
/* Thumb styling for Webkit browsers */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--slider-thumb-color);
  border: 2px solid var(--slider-progress-color);
  margin-top: -6px;
}
/* Track styling for Firefox */
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: var(--slider-color);
}
input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--slider-progress-color);
}
/* Thumb styling for Firefox */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--slider-thumb-color);
  border: 2px solid var(--slider-progress-color);
}

/* --- From: admin.html & onboarding_home.html --- */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-content {
  animation: slideDown 0.3s ease-out forwards;
}
.delete-confirmation-dialog {
  animation: slideDown 0.3s ease-out forwards;
}
.sortable-header {
  cursor: pointer;
}
.sortable-header:hover {
  background-color: #f9fafb;
}
.dark .sortable-header:hover {
  background-color: #374151;
}

/* --- From: onboarding_manager.html --- */
.toggle-icon {
  transition: transform 0.3s ease-in-out;
}
.sortable-ghost {
  opacity: 0.4;
  background-color: #e0e7ff;
  border: 2px dashed #6366f1;
}
.notes-textarea:focus,
.video-input:focus,
.date-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* --- Fix for Agent Plan Notes Links --- */
.milestone-notes a {
  color: #2563eb; /* blue-600 */
  text-decoration: underline;
}

.milestone-notes a:hover {
  color: #1d4ed8; /* blue-700 */
}

.dark .milestone-notes a {
  color: #60a5fa; /* blue-400 */
}

.dark .milestone-notes a:hover {
  color: #93c5fd; /* blue-300 */
}