/* ########## Index page styles - START ########## */

.index-page-container {
  max-width: 1280px;
  background: linear-gradient(180deg, #f6f9fc 0%, #eef3f8 100%);
  border-radius: 0.75rem;
}

.index-hero {
  padding: 0.25rem 0 0.5rem;
}

.index-title {
  font-weight: 700;
  color: var(--blue);
}

.index-subtitle {
  color: #5f6b76;
}

.index-card {
  border: 1px solid rgba(0, 39, 76, 0.12);
  box-shadow: 0 8px 18px rgba(19, 21, 22, 0.06);
}

.index-page-container .table-card.index-card {
  border-left: 4px solid rgba(0, 39, 76, 0.35);
  background-color: #E9F4FF;
}

.index-card .card-title {
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.9rem;
}

.index-card.admin-index-card {
  border-left: 4px solid rgba(154, 51, 36, 0.35) !important;
  background-color: #FDECEA !important;
}

.index-card.admin-index-card .card-title {
  color: var(--tappanred) !important;
}

.index-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.index-section-header .card-title {
  margin-bottom: 0;
}

.index-import-btn {
  width: 100%;
  white-space: nowrap;
}

.index-stat-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
}

.index-stat-card {
  border: 1px solid rgba(0, 39, 76, 0.12);
  border-radius: 0.75rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 203, 5, 0.08));
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.index-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #5f6b76;
}

.index-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.2;
}

.index-stat-meta {
  display: inline;
  font-size: 0.82rem;
  font-weight: 500;
  color: #5f6b76;
  white-space: nowrap;
}

.index-stat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

@media (min-width: 768px) {
  .index-import-btn {
    width: auto;
  }

  .index-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .index-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .index-page-container {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .index-title {
    font-size: 1.35rem;
    line-height: 1.25;
  }

  .index-subtitle {
    font-size: 0.9rem;
  }

  .index-card .card-body {
    padding: 0.85rem;
  }

  .index-section-header--stack-mobile {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .index-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .index-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ########## Index page styles - END ########## */

/* Floating button styles */
.floating-buttons {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  display: none;
  /* Hidden by default */
}

.floating-buttons .btn {
  margin: 5px;
}

#floating-alerts {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 1050;
  /* Bootstrap's default z-index for alerts */
  max-width: 300px;
  /* Optional: limit the width of the alert container */
}

#floating-alerts .alert {
  margin-bottom: 1rem;
}

.pagination .page-item .page-link.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

.pagination .page-text {
  width: 50px;
  text-align: center;
}

/* Library Artifact - Styles  */
.doc-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-weight: 700;
  font-size: 0.78rem;
  border: 1px solid transparent;
  white-space: nowrap;
}

.doc-type-chip i {
  font-size: 0.86rem;
}

.doc-type-chip.doc-type-bk {
  color: #3a2d00;
  background: #fde68a;
  border-color: #f7cf4f;
}

.doc-type-chip.doc-type-mag {
  color: #0f3a66;
  background: #bfdbfe;
  border-color: #93c5fd;
}

.doc-type-chip.doc-type-j {
  color: #0f5132;
  background: #bbf7d0;
  border-color: #86efac;
}

.doc-type-chip.doc-type-sw {
  color: #5b1a53;
  background: #f5d0fe;
  border-color: #f0abfc;
}

.doc-type-chip.doc-type-the {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #93c5fd;
}

.doc-type-chip.doc-type-oth {
  color: #374151;
  background: #e5e7eb;
  border-color: #cbd5e1;
}

/* Base contributor chip */
.contributor-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  border: 1px solid transparent;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1;
}

.contributor-chip i {
  font-size: 0.92rem;
}

/* Author */
.contributor-chip.contributor-chip-author {
  color: #7c2d12;
  background: #fed7aa;
  border-color: #fdba74;
}

/* Editor */
.contributor-chip.contributor-chip-editor {
  color: #155e75;
  background: #cffafe;
  border-color: #67e8f9;
}

/* Illustrator */
.contributor-chip.contributor-chip-illustrator {
  color: #9d174d;
  background: #fbcfe8;
  border-color: #f9a8d4;
}

/* Optional fallback for unknown contributor type */
.contributor-chip.contributor-chip-other {
  color: #374151;
  background: #e5e7eb;
  border-color: #cbd5e1;
}

/* Link wrapper reset */
a.contributor-chip,
a .contributor-chip,
.chip-link {
  text-decoration: none;
}

a.contributor-chip:hover,
a .contributor-chip:hover,
.chip-link:hover {
  text-decoration: none;
}