frontend/css/artefact-context.css

.selected-img {
  border: 4px solid #ffc107 !important;
}
.example-scroll::-webkit-scrollbar {
  height: 10px;
}
.example-scroll::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 5px;
}
.example-scroll::-webkit-scrollbar-track {
  background: #eee;
}
    .spin {
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#topicTags .badge {
  font-size: 1rem;
  margin-bottom: 0.3em;
  /* Add some spacing between tags */
}

/* --- BibTeX panel: eggshell background, black text --- */
#bibtexContent {
  background:#fdfde7 !important;   /* eggshell */
  color:#000 !important;
}

/* --- 2-row image gallery ----------------------------------------------- */
#galleryScroller{
  display:grid;                     /* grid instead of flex  */
  grid-template-columns:repeat(auto-fill,120px);
  grid-auto-rows:120px;             /* second row appears automatically */
  gap:.5rem;
  overflow-y:auto;                  /* keep horizontal + vertical scroll */
}
#galleryScroller img{
  /* existing size rules kept intact */
  width:120px;
  height:120px;
  object-fit:cover;

  border:2px solid transparent;           /* make room for colour change   */
  transition:border-color .15s ease;
}

#galleryScroller img:hover{
  border-color:#0d6efd !important;         /* same blue used for sentences */
}

/* enlarge the image-tool buttons (≈ 2 × current size) */
#imageTools .btn {
  width: 56px;            /* twice previous 28 px */
  height: 56px;
  font-size: 1.5rem;      /* icons scale up */
  padding: 0;
}

/* ── Sentence list interactivity ─────────────────────────────────────────── */
#sentenceList .sentence-item {
  cursor: pointer;
  border: 1px solid transparent;   /* make a full-box border we can tint */
  transition: border-color .15s ease;

  /* ---------- academic look ---------- */
  font-family: "Georgia","Times New Roman",serif;
  font-size: .95rem;      /* a touch smaller than body text */
}
#sentenceList .sentence-item:hover {
  border-color:#0d6efd !important; /* Bootstrap primary blue on all sides */
}

/* ── Heatmap button styling ──────────────────────────────────────────────── */
.heatmap-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.heatmap-btn i {
  font-size: 0.875rem;
}

/* Sentence text should still be clickable */
.sentence-item span {
  cursor: pointer;
}

/* Heatmap overlay image styling */
.heatmap-image {
  pointer-events: none;  /* Allow click-through to close button */
}

#closeHeatmapBtn {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

#closeHeatmapBtn:hover {
  opacity: 1;
}

/* ---------- Home palette ------------------------------------------------- */
.card:has(#uploadTrigger),
#exampleContainer                    { background:#fff!important; color:#000!important; }
.card:has(#uploadTrigger) *          { color:#000!important; }

/* topic tags - fix text colors with higher specificity */
#topicTags .btn-outline-primary {
  border-color: #000 !important;
  color: #000 !important;
  background: #fff !important;
}

#topicTags .btn-outline-primary:hover {
  background: #0d6efd !important;
  color: #fff !important;
  border-color: #0d6efd !important;
}

#topicTags .btn-primary,
#topicTags .btn-primary:hover,
#topicTags .btn-primary:focus,
#topicTags .btn-primary:active,
#topicTags .btn.btn-primary {
  background: #0d6efd !important;
  color: #fff !important;
  border-color: #0d6efd !important;
}

/* override any card inheritance for topic buttons */
.card:has(#topicTags) .btn-primary,
.card:has(#topicTags) .btn-primary * {
  color: #fff !important;
}

/* creator search result pills - fix colors */
#creatorSearchResults .list-group-item,
#creatorPanelResults .list-group-item {
  color: #000 !important;
  background: #fff !important;
  border-color: #dee2e6 !important;
  transition: all 0.2s ease;
}

#creatorSearchResults .list-group-item:hover,
#creatorPanelResults .list-group-item:hover {
  color: #fff !important;
  background: #0d6efd !important;
  border-color: #0d6efd !important;
}

#creatorSearchResults .list-group-item.active,
#creatorPanelResults .list-group-item.active {
  color: #fff !important;
  background: #0d6efd !important;
  border-color: #0d6efd !important;
}

/* upload button already given dark outline in HTML patch */
/* ------------------------------------------------------------------------ */

/* stretch main column if the sidebar is hidden */
.col-md-9.fill  { flex:0 0 100%!important; max-width:100%!important; }

/* give the example-image Select button a solid black outline */
#selectImageBtn{
  border:2px solid #000 !important;
}

/* light-grey hover (same shade Bootstrap uses for .btn-light) */
#uploadTrigger:hover{
  background:#e9ecef !important;   /* light grey */
  color:#000        !important;
  border-color:#000 !important;
}

/* selected topic (btn-primary) ‑ ensure white label */
#topicTags .btn-primary,
#selectedTopicTags .btn-primary{
  color:#fff !important;
}

/* navbar items (model dropdown + about) – always white */
.navbar-dark .navbar-nav .nav-link{
  color: #fff !important;
}

/* Add hover effect for navbar links */
.navbar-dark .navbar-nav .nav-link:hover {
  color: #adb5bd !important;
}

/* Ensure dropdown toggle also gets hover effect */
.navbar-dark .navbar-nav .dropdown-toggle:hover {
  color: #adb5bd !important;
}

/* creator badges - force white text with maximum specificity */
#creatorTags .badge,
#selectedCreatorTags .badge,
#creatorTags span.badge,
#selectedCreatorTags span.badge,
#creatorTags .badge.bg-primary,
#selectedCreatorTags .badge.bg-primary {
  color: #fff !important;
  background: #0d6efd !important;
}

/* override card inheritance for creator badges */
.card:has(#creatorSearch) .badge,
.card:has(#creatorSearch) .badge *,
.card:has(#creatorSearch) span.badge,
.card:has(#creatorSearch) span.badge * {
  color: #fff !important;
}

/* navbar custom dark blue */
.navbar-dark{
  background:#010e1d !important;
}

/* prevent stray elements from creating a horizontal scrollbar */
body{ overflow-x:hidden; }

/* hide detailed working log for end-users */
#workingLog{ display:none !important; }

@keyframes dotPulse{
  0%,20%{opacity:0}
  40%{opacity:1}
}
.loading-dots span{
  animation:dotPulse 1s infinite;
}
.loading-dots span:nth-child(2){ animation-delay:.2s }
.loading-dots span:nth-child(3){ animation-delay:.4s }

/* dark-blue footer (re-use navbar colour) */
.bg-durham{ background:#010e1d !important; }

.footer a{ 
  color:#fff !important; 
  text-decoration:underline; 
}

.footer a:hover{ 
  color:#adb5bd !important; 
}

/* Ensure all footer links have consistent styling */
.footer .text-white {
  color: #fff !important;
  text-decoration: underline;
}

.footer .text-white:hover {
  color: #adb5bd !important;
}

/* About modal custom styling */
#aboutModal .modal-header {
  border-bottom: 2px solid #dee2e6;
}

#aboutModal .card {
  transition: transform 0.2s ease;
}

#aboutModal .card:hover {
  transform: translateY(-2px);
}

#aboutModal section {
  border-bottom: 1px solid #f8f9fa;
  padding-bottom: 1rem;
}

#aboutModal section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* model dropdown custom styling */
#modelDropdownMenu .dropdown-item {
  color: #000 !important;
  background: #fff !important;
  transition: all 0.2s ease;
}

#modelDropdownMenu .dropdown-item:hover {
  color: #fff !important;
  background: #0d6efd !important;
}

/* new layout: topic/creator cards need white backgrounds (but exclude buttons/badges) */
.card:has(#topicTags),
.card:has(#creatorSearch) {
  background: #fff !important;
  color: #000 !important;
}

.card:has(#topicTags) h5,
.card:has(#topicTags) .card-title,
.card:has(#creatorSearch) h5,
.card:has(#creatorSearch) .card-title {
  color: #000 !important;
}

/* override the bg-dark class on the new topic/creator cards */
.card.bg-dark.bg-opacity-50:has(#topicTags),
.card.bg-dark.bg-opacity-50:has(#creatorSearch) {
  background: #fff !important;
  color: #000 !important;
}

/* creator search input in new layout */
.card:has(#creatorSearch) .form-control {
  color: #000 !important;
  background: #fff !important;
  border-color: #ced4da !important;
}

.card:has(#creatorSearch) .form-control:focus {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* light grey background for the main upload container */
#uploadedImageContainer {
  background: #f8f9fa !important; /* very light grey instead of bg-secondary */
}

/* Make sure the image tools stay positioned correctly */
#uploadedImageContainer:has(#uploadedImage:not(.d-none)) #imageTools {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* force white text on all blue badges and buttons */
.btn-primary *, 
.badge.bg-primary *,
.bg-primary * {
  color: #fff !important;
}

/* specifically target the creator badge text */
span.badge.bg-primary {
  color: #fff !important;
}

span.badge.bg-primary * {
  color: #fff !important;
}

/* Ensure footer is always visible below content */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container-fluid {
  flex: 1;
}

.footer {
  margin-top: auto;
}

/* ── main painting + sentences row ───────────────────────────────────────── */
.main-row{
  height: calc(100vh - 220px);   /* navbar + bottom cards margin */
  min-height: 420px;             /* don't shrink too small        */
}

/* image column : fill row height */
.main-row .col-md-9 > #uploadedImageContainer{
  height:100% !important;
}

/* picture fits inside its box */
#uploadedImage{
  max-height:100% !important;
  max-width:100%;
  object-fit:contain;
}

/* --- “In Context” paragraph --------------------------------------------- */
.context-paragraph{
  font-family: "Georgia","Times New Roman",serif;
  font-size: .9rem;          /* smaller than body text */
  margin: 0;                 /* keep compact inside section */
}