/* ============================================
   GLOBAL ELEMENT STYLING
   ============================================ */
body {
  padding-top: 60px;
}

p {
  max-width: 800px;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #0d6efd;         /* Bootstrap primary blue */
  text-decoration: underline;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s ease, background-color 0.2s ease, text-decoration 0.2s ease;
}

a:hover,
a:focus {
  color: #0056b3;
  text-decoration: underline;
}

a:active {
  color: #004085;
}

a:visited {
  color: #0d6efd;
}


/* ============================================
   LAYOUT COMPONENTS
   ============================================ */
.sidebar {
  width: 250px;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
}

.sidebar a.active,
.offcanvas-body a.active {
  background-color: #0d6efd;
  color: #fff !important;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.accordion-button.not-collapsible {
  background-color: #ffffff;
  color: #000;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.accordion-button.not-collapsible::after {
  display: none;
}

.accordion-button.active {
  background-color: #0d6efd;
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}

.main-content {
  box-sizing: border-box;
  overflow-x: hidden;
  padding: 1rem;
}

.footer {
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  padding: 1rem;
  word-wrap: break-word;
}

.image-container {
  position: relative;
  width: 100%;
  max-width: 960px;
}

.image-container img {
  width: auto;     /* Keep natural image size */
  max-width: 100%; /* Don't overflow container on smaller screens */
  height: auto;
  display: block;
}

img.menu-icon,
span.menu-text {
  vertical-align: middle;
}
img.menu-icon {
  margin-right: 2px; /* Space between icon and text */
  height: 16px; /* Consistent icon size */
  width: 16px; /* Consistent icon size */
}

/* ============================================
   TABLES
   ============================================ */
table.custom-table {
  width: 80%;
  margin: 0;
  border-collapse: collapse;
  border: 1px solid #888;
}

table.custom-table th {
  background-color: #f0f0f0;
  border: 1px solid #888;
  padding: 0.5rem;
  text-align: left;
}

table.custom-table td, table.custom-table th {
  border: 1px solid #888;
  padding: 0.5rem;
  vertical-align: top;
}

table.custom-table td:first-child {
  white-space: normal;
  padding-right: 1rem;
  font-weight: bold;
  min-width: 120px;
}


table.custom-table td.ps-3,
table.custom-table td.ps-4,
table.custom-table td.ps-5 {
  font-weight: normal;
}


/* ============================================
   MEDIA QUERIES
   ============================================ */
@media (min-width: 768px) {
  table.custom-table td:first-child {
    min-width: 200px;
  }
  .sidebar {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    overflow-y: auto;
  }

  .main-content {
    margin-left: 250px;
    width: calc(100% - 250px);
  }

  .footer {
    margin-left: 250px;
  }
}

@media (max-width: 991.98px) {
  table.custom-table {
    width: 100%;
  }
}