/* ============================================================================
   The back of an activity card (js/components/CardBack.js), at the top of the
   editor's Activities tab, and "Gå dypere" with the templates below it
   ============================================================================ */

.card-back {
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  background: var(--bh-white, #fff);
  border: 2px solid var(--bh-black, #111);
  box-shadow: var(--bh-shadow-sm, 3px 3px 0 #111);
}

.card-back-title,
.card-back-subtitle {
  font-weight: 700;
  color: var(--bh-navy, #1B2A4A);
}

.card-back-title {
  margin-bottom: 0.25rem;
}

.card-back-subtitle {
  margin: 0.9rem 0 0.35rem;
  font-size: 0.9rem;
}

.card-back-hint {
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: #555;
}

/* Two columns when the panel is wide enough */
.card-back-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.15rem 1rem;
}

.card-back-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  align-items: start;
  padding: 0.3rem 0.25rem;
  cursor: pointer;
}

.card-back-item:hover {
  background: var(--bh-cream, #F5F0E6);
}

.card-back-item .form-check-input {
  grid-row: span 2;
  margin-top: 0.2rem;
}

.card-back-name {
  font-weight: 600;
  line-height: 1.25;
}

.card-back-meta {
  font-size: 0.75rem;
  color: #666;
}

.card-back-own {
  margin-top: 0.6rem;
}

.card-back-own .form-label {
  margin-bottom: 0.2rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.card-back-tool-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.card-back-tool-list li {
  margin-bottom: 0.2rem;
}

/* The card's links (the rows look as under Design, without change/remove) */
.card-back-links {
  container-type: inline-size;
}

.card-back-link-list {
  margin-bottom: 0.25rem;
}

/* Turned to from the link count on the card: the heading at the top of the panel */
#card-back-links {
  scroll-margin-top: 1rem;
}

.card-back-links-edit {
  padding-left: 0;
  font-size: 0.85rem;
}

/* --- Gå dypere ---------------------------------------------------------------- */

/* The filter bar's negative top margin (activity-modal.css) lets it sit flush
   under the tabs when it comes first; below the card back it would cover the
   "Gå dypere" heading. It still sticks to the top of the panel when scrolling. */
#card-back-deeper .activity-filter-bar {
  margin-top: 0;
}

/* Scrolled to on opening: the heading lands at the top of the panel body */
#card-back-deeper {
  scroll-margin-top: 1rem;
}

.card-back-deeper {
  border-top: 2px solid var(--bh-black, #111);
  padding-top: 0.5rem;
}

/* The heading is a bar that looks clickable: an arrow that turns when open,
   and "Vis" / "Skjul" on the right (the browser's own marker is replaced) */
.card-back-deeper-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #c9d1de;
  border-radius: 6px;
  background: #f3f6fa;
  font-weight: 700;
  color: var(--bh-navy, #1B2A4A);
  cursor: pointer;
  list-style: none;
}

.card-back-deeper-summary::-webkit-details-marker {
  display: none;
}

.card-back-deeper-summary:hover {
  background: #e6ecf4;
  border-color: var(--bh-navy, #1B2A4A);
}

.card-back-deeper-summary:focus-visible {
  outline: 3px solid var(--bh-gold, #E8A820);
  outline-offset: 2px;
}

.card-back-deeper-chevron {
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}

.card-back-deeper[open] .card-back-deeper-chevron {
  transform: rotate(90deg);
}

.card-back-deeper-action {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.85rem;
  text-decoration: underline;
}

.card-back-deeper-hide,
.card-back-deeper[open] .card-back-deeper-show {
  display: none;
}

.card-back-deeper[open] .card-back-deeper-hide {
  display: inline;
}

.card-back-deeper[open] .card-back-deeper-summary {
  margin-bottom: 0.5rem;
}

.card-back-match-count {
  font-weight: 400;
  font-size: 0.85rem;
  color: #555;
}

/* "Passer med valgene dine": the templates of the ticked activities, above
   the duration groups (CardBack.rankTemplates) */
.card-back-match-title {
  color: var(--bh-navy, #1B2A4A) !important;
  border-bottom-color: var(--bh-gold, #E8A820) !important;
}

.card-back-match-title .fa-star {
  color: var(--bh-gold, #E8A820);
}

/* Templates of the ticked activities */
.activity-card.card-back-match {
  outline: 3px solid var(--bh-gold, #E8A820);
  outline-offset: -3px;
}

/* In a workshop, the cards turned over show only the card back */
body.workshop-back-limited #card-back-deeper {
  display: none;
}