/* Import Google Font - Sora */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&display=swap");

/* Base Styles */
body {
  font-family: "Sora", sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

/* Light Theme (Default) */
[data-bs-theme="light"] {
  background-color: #f8f9fa; /* Light gray background */
  color: #212529; /* Dark text */
}

[data-bs-theme="light"] .card {
  background-color: #ffffff; /* White card background */
  border-color: #dee2e6; /* Light border */
  color: #212529; /* Dark text */
}

[data-bs-theme="light"] .card-header {
  background-color: #e9ecef; /* Lighter card header */
  border-bottom: 1px solid #dee2e6;
  color: #212529;
}

[data-bs-theme="light"] .modal-content {
  background-color: #ffffff;
  color: #212529;
}

[data-bs-theme="light"] .modal-header {
  border-bottom-color: #dee2e6;
}

[data-bs-theme="light"] .modal-footer {
  border-top-color: #dee2e6;
}

/* Dark Theme */
[data-bs-theme="dark"] {
  background-color: #343a40; /* Dark gray background */
  color: #f8f9fa; /* Light text */
}

[data-bs-theme="dark"] .card {
  background-color: #454d55; /* Slightly lighter dark card background */
  border-color: #6c757d; /* Darker border */
  color: #f8f9fa; /* Light text */
}

[data-bs-theme="dark"] .card-header {
  background-color: #343a40; /* Darker card header */
  border-bottom: 1px solid #6c757d;
  color: #f8f9fa;
}

[data-bs-theme="dark"] .modal-content {
  background-color: #454d55;
  color: #f8f9fa;
}

[data-bs-theme="dark"] .modal-header {
  border-bottom-color: #6c757d;
}

[data-bs-theme="dark"] .modal-footer {
  border-top-color: #6c757d;
}

/* Code block styling */
pre {
  background-color: var(--bs-tertiary-bg); /* Bootstrap's neutral background */
  padding: 1rem;
  border-radius: 0.25rem;
  overflow-x: auto; /* Enable horizontal scroll for long lines */
  color: var(--bs-body-color); /* Inherit text color for readability */
}

code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
    monospace;
  font-size: 0.875em; /* Slightly smaller font for code */
  color: inherit; /* Ensure code text color adapts to theme */
}

/* Specific styling for header and footer as requested */
footer.bg-dark {
  background-color: #000000 !important; /* Pure black */
  color: #ffffff;
}

/* Adjust table styling for theme */
[data-bs-theme="dark"] .table {
  --bs-table-color: var(--bs-light); /* Light text for table in dark mode */
  --bs-table-bg: var(--bs-dark); /* Dark background for table */
  --bs-table-border-color: var(--bs-gray-700);
  --bs-table-striped-bg: #3c434a; /* Darker stripe */
  --bs-table-hover-bg: #495057; /* Darker hover */
}

[data-bs-theme="light"] .table {
  --bs-table-color: var(--bs-dark); /* Dark text for table in light mode */
  --bs-table-bg: var(--bs-white); /* White background for table */
  --bs-table-border-color: var(--bs-gray-300);
  --bs-table-striped-bg: var(--bs-gray-100); /* Lighter stripe */
  --bs-table-hover-bg: var(--bs-gray-200); /* Lighter hover */
}

.content-img {
  display: flex;
  flex-direction: column;
  width: 60px;
  align-content: end;
  direction: rtl;
  position: relative;
  margin-top: 30px;
}

.name-title {
  display: flex;
  justify-content: end;
  position: relative;
  left: 0px;
  top: 5px;
  text-wrap: nowrap;
  font-size: 15px;
}