/* 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: #ec3013;
}
.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;
}

/* Text links: NORMAL font color with a FINE RED UNDERLINE, red text only on
   hover. Red link TEXT has now been tried and rejected TWICE — task 14's
   first pass and the 2026-07-29 global red pass both drew the same client
   verdict ("sieht aus wie ein defekter Link") — so do not reintroduce it;
   red stays on buttons, pagination boxes, icons and controls. Bare links
   outside this rule get their rest color from the --bs-link-* redefinition
   below (body color at rest, red on hover). The :not() chain excludes
   everything that carries its own look: buttons, badges, nav pills,
   dropdowns, pagination, and the card-as-link patterns (.text-reset /
   .text-decoration-none / .stretched-link). */
.page-content a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.page-link):not(.text-reset):not(.text-decoration-none):not(.stretched-link) {
  /* The !important on the three decoration longhands is load-bearing: the
     vendored bootstrap.min.css declares `a{text-decoration:none!important}`,
     which beats ANY specificity — without these, every underline on the site
     dies silently (which is exactly what happened, client catch). The
     shorthand resets line+color+thickness, so all three need the marker;
     text-underline-offset is not part of the shorthand and needs none. */
  color: inherit;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: #ec3013 !important;
  text-underline-offset: 3px;
}
.page-content a:not(.btn):not(.badge):not(.nav-link):not(.dropdown-item):not(.page-link):not(.text-reset):not(.text-decoration-none):not(.stretched-link):hover {
  color: #ec3013;
  text-decoration-color: #ec3013 !important;
}

/* Footer links sit outside .page-content: same treatment as content links. */
footer a {
  color: inherit;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: #ec3013 !important;
  text-underline-offset: 3px;
}
footer a:hover { color: #ec3013; }

/* --- ESL design system (task 14): red primary, dark banner, Archivo brand --- */

/* Primary buttons in brand red. Both the CSS-variable form (Bootstrap >= 5.2
   resolves buttons through --bs-btn-*) and plain properties, so the override
   holds whichever path the vendored build takes. */
.btn-primary {
  --bs-btn-bg: #ec3013;
  --bs-btn-border-color: #ec3013;
  --bs-btn-hover-bg: #c9280f;
  --bs-btn-hover-border-color: #c9280f;
  --bs-btn-active-bg: #b0220a;
  --bs-btn-active-border-color: #b0220a;
  --bs-btn-disabled-bg: #ec3013;
  --bs-btn-disabled-border-color: #ec3013;
  --bs-btn-focus-shadow-rgb: 236, 48, 19;
  background-color: #ec3013;
  border-color: #ec3013;
}
/* !important is load-bearing (codex catch): the vendored app.min.css pins
   .btn-primary hover/focus/active to template blue WITH !important, so a
   normal override wins at rest and loses the moment the button is touched. */
.btn-primary:hover, .btn-primary:focus {
  background-color: #c9280f !important;
  border-color: #c9280f !important;
}
.btn-primary:active, .btn-primary.active {
  background-color: #b0220a !important;
  border-color: #b0220a !important;
}
.btn-primary:focus, .btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(236, 48, 19, 0.3) !important;
}

/* The banner (top bar with the logo) in the design system's near-black. Every
   header control sits on it, so they all go light. */
.navbar-header {
  background-color: #201e1d;
}
.navbar-header .header-item,
.navbar-header .header-item i,
.navbar-header .fw-medium {
  color: #f2f0ef !important;
}
.navbar-header .header-item:hover {
  color: #ffffff !important;
}
.esl-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.esl-brand img {
  height: 38px;
  width: auto;
  display: block;
}
.esl-brand-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #ffffff;
  white-space: nowrap;
}
.esl-brand:hover .esl-brand-name { color: #ffffff; }

/* Red bottom border for the SMALL boxes only (landing sidebars for now — not
   the middle column, not anything wider than 6/12; per the design screenshot). */
.card-accent {
  border-bottom: 3px solid #ec3013;
}

/* --- Font-size control (task 15). `zoom` rather than a root font-size bump:
   the vendored template sizes most text with px utilities (font-size-13 etc.)
   that a rem change would not touch, and an "increase font size" button that
   only grows SOME text reads as broken. Zoom scales the page uniformly, like
   the browser's own zoom. --- */
html[data-fontsize="lg"] body { zoom: 1.12; }
html[data-fontsize="xl"] body { zoom: 1.25; }

/* --- Organisation logo carousel (task 16): 6 tiles visible, the track slides
   one tile per second (JS moves the first tile to the end after each step). --- */
.org-carousel { overflow: hidden; }
.org-carousel-track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}
.org-carousel-item {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
  padding: 0 10px;
  text-align: center;
}
.org-carousel-item img {
  max-width: 100%;
  height: 84px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .org-carousel-item { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* --- Global red repaint (client feedback 2026-07-29): "all links and buttons
   should be red — globally, not one-by-one."

   Bootstrap 5.3 resolves bare links, .btn-link, .text-primary, .bg-primary,
   .bg-primary-subtle, pagination hover/focus and more through the custom
   properties below, so redefining them recolors every consumer at once —
   including places with no class of their own (the admin tiles' "Details"
   links, the footer, the landing live feed). Values the build BAKED into
   class-local hex (.btn-primary above, .btn-outline-*, the pagination active
   box, form focus tints, checkboxes, the map tooltip) get explicit overrides
   after the variable block. Semantic colors stay untouched: success/danger/
   warning buttons and status/info badges keep their meaning — red everywhere
   would erase what the red ones signal. --- */
:root, [data-bs-theme=light] {
  --bs-primary: #ec3013;
  --bs-primary-rgb: 236, 48, 19;
  --bs-primary-bg-subtle: #fdeae7;
  --bs-primary-border-subtle: #f8b7ab;
  --bs-primary-text-emphasis: #b0220a;
  /* Link REST color is the body color — red text on links reads as broken
     (client, twice; see the text-link rule above). Hover goes brand red, so
     every bare link (admin tiles' "Details", card patterns) still signals. */
  --bs-link-color: var(--bs-body-color);
  --bs-link-color-rgb: var(--bs-body-color-rgb);
  --bs-link-hover-color: #ec3013;
  --bs-link-hover-color-rgb: 236, 48, 19;
}

/* Outline buttons carry their palette in class-local baked vars. .btn-outline-info
   is included: it is another template blue, and the client wants no blue buttons. */
.btn-outline-primary,
.btn-outline-info {
  --bs-btn-color: #ec3013;
  --bs-btn-border-color: #ec3013;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ec3013;
  --bs-btn-hover-border-color: #ec3013;
  --bs-btn-focus-shadow-rgb: 236, 48, 19;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b0220a;
  --bs-btn-active-border-color: #b0220a;
  --bs-btn-disabled-color: #ec3013;
  --bs-btn-disabled-border-color: #ec3013;
}

/* Pagination (incl. DataTables): the boxes are button-like, so they DO go
   red — and since the link vars now carry body color at rest, hover/focus
   need explicit values besides the baked active box and focus ring. */
.pagination {
  --bs-pagination-hover-color: #ec3013;
  --bs-pagination-focus-color: #c9280f;
  --bs-pagination-active-bg: #ec3013;
  --bs-pagination-active-border-color: #ec3013;
  --bs-pagination-focus-box-shadow: 0 0 0 0.15rem rgba(236, 48, 19, 0.15);
}

/* Form focus tints are baked soft template-blue in this build. */
.form-control:focus,
.form-select:focus {
  border-color: #f3a294;
  box-shadow: 0 0 0 0.15rem rgba(236, 48, 19, 0.15);
}
.form-check-input:checked { background-color: #ec3013; border-color: #ec3013; }
.form-check-input:focus {
  border-color: #f3a294;
  box-shadow: 0 0 0 0.15rem rgba(236, 48, 19, 0.15);
}

/* The DEFAULT progress-bar color is baked too (a bare .progress-bar showed
   template blue on the folder-upload dialog — review catch). Bars carrying an
   explicit bg-* utility keep it: the utility's !important background wins, so
   the two-color download chart keeps its blue ZIP segment. */
.progress, .progress-stacked { --bs-progress-bar-bg: #ec3013; }

/* World-map hover tooltip: the vendored jsvectormap ships it #5c5cff blue, and
   its stylesheet loads AFTER this one (injected by the statistics view), so the
   element selector raises specificity above the vendor's bare class. */
div.jvm-tooltip { background-color: #ec3013; }

/* The banner's black must span the full viewport: the vendored template centers
   .navbar-header at max-width 85%, which left white bands either side. The
   template re-asserts the wrapper background at body[data-layout=horizontal]
   specificity, so a bare class here silently loses — match it. Content keeps
   the template's width; the .topnav row below still lays its own background
   over this. */
body[data-layout=horizontal] .ishorizontal-topbar,
.ishorizontal-topbar { background-color: #201e1d; }

/* Logged-in profile icon reddish: the glyph color lives in the SVG itself
   (img/avatar/generic.svg, only used in the header), the ring here. */
.navbar-header .header-profile-user { border-color: #ec3013; }

/* Topnav hover/focus in brand red (was template blue, pinned by the vendored
   sheet at its own specificity — .nav-link is excluded from the link vars). */
.topnav .navbar-nav .nav-link:hover,
.topnav .navbar-nav .nav-link:focus { color: #ec3013; }