/* Custom admin styles */

/* Navbar: slightly darker gray than Bootstrap bg-light */
.admin-navbar {
  background-color: #e0e0e0 !important; /* more gray */
}

/* Main content centered container */
.main-content-wrapper {
  background: #ffffff; /* keep page sides white */
}

.main-container {
  max-width: 1424px;
  margin: 0 auto;
  background-color: #f5f5f5; /* slightly gray background for content area */
  padding: 12px;
}

/* Status badges for project status */
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  font-weight: 600;
}
.status-published { background-color: #28a745; }
.status-draft { background-color: #fd7e14; }

/* Materials tree: collapsible folder toggles */
.material-folder-toggle {
  cursor: pointer;
  user-select: none;
}
.material-folder-toggle:hover .material-folder-caret {
  color: #0d6efd;
}
.material-folder-caret {
  display: inline-block;
  width: 0.9em;
  color: #6c757d;
  font-size: 0.85em;
}

/* AI Teaching Assistant: flash the answer card when a reply arrives.

   Green, not the site's blue: blue is already the colour of every link and
   button inside this card, so a blue tint reads as chrome rather than as
   change. Two slow cycles at ~0.9 Hz, deliberately nowhere near the 3 Hz
   threshold at which flashing content becomes a seizure risk.

   Selector is .card.assistant-answer-pulse, not the bare class: Bootstrap's
   .card sets background-color, and equal specificity would leave the outcome
   to stylesheet order. The extra class wins outright. */
@keyframes assistantAnswerPulse {
  0%   { background-color: rgba(25, 135, 84, 0.16); }
  50%  { background-color: rgba(25, 135, 84, 0.00); }
  100% { background-color: rgba(25, 135, 84, 0.16); }
}
.card.assistant-answer-pulse {
  background-color: rgba(25, 135, 84, 0.16);
  animation: assistantAnswerPulse 1.1s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
  /* No flashing, but keep the static tint: the JS removes the class on a timer,
     so these visitors still get a visible cue rather than nothing at all. */
  .card.assistant-answer-pulse { animation: none; }
}

/* Admin dashboard: the four statistics tiles that share one card.

   Separators are drawn here rather than with per-tile border utilities because
   WHICH edge needs a line changes at the breakpoint: stacked below 768px every
   tile but the first needs a line above it, while at two columns the second
   tile of a row must not repeat it and the left column gains a vertical rule.
   768px is not a free choice — it is where .row-cols-md-2 folds. */
.stat-tiles > .stat-tile + .stat-tile {
  border-top: 1px solid var(--bs-border-color);
}
@media (min-width: 768px) {
  .stat-tiles > .stat-tile:nth-child(2) {
    border-top: 0;
  }
  /* :not(:last-child) so an ODD number of tiles does not leave the last one
     drawing a vertical rule against empty space. */
  .stat-tiles > .stat-tile:nth-child(odd):not(:last-child) {
    border-right: 1px solid var(--bs-border-color);
  }
}
/* The whole tile is a link (.stretched-link), so it needs to say so on hover. */
.stat-tiles > .stat-tile:hover {
  background-color: var(--bs-tertiary-bg);
}
/* …but not over the figures. .stretched-link::after covers the tile at z-index 1,
   which swallows text selection: mousedown and mouseup on a number both land on
   the link, so dragging to copy "9,836" navigates to the report instead. This is
   the only place those figures appear, and they were plain selectable text before
   the tiles existed, so lifting them back above the overlay keeps both — a
   tile-sized click target, and numbers you can still select. A click directly on
   a figure now does nothing, which is the right answer for clicking text. */
.stat-tiles > .stat-tile h5 {
  position: relative;
  z-index: 2;
}