/* ResourcesForCourses: trainee-facing pages (entry, and the resource list). Same base tokens, buttons and inputs
   as every other module's trainee style.css (groupcards/assets/style.css etc.) - copied here (rather than shared)
   since each module's index.php is fully self-contained. */

:root {
  --blue: #2178ba;
  --blue-dark: #1a5683;
  --teal: #3ec1d5;
  --text: #212529;
  --muted: #6c757d;
  --line: #dee2e6;
  --bg: #f4f7fa;
  --danger: #dc3545;
  --ok: #198754;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.4;
}

a { color: var(--blue); }
h1 { margin: 0 0 0.6em; color: var(--blue-dark); }
h2 { margin: 0 0 0.4em; color: var(--blue-dark); font-size: 1.1rem; }

.btn {
  font: inherit;
  padding: 0.45em 1em;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: #eaf3fa; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }
.btn.big { font-size: 1.2rem; padding: 0.6em 1.6em; margin-top: 1rem; }

.hint { color: var(--muted); font-size: 0.9rem; }
.notice { padding: 0.7em 1em; border-radius: 6px; margin: 0 0 1em; }
.notice.error { background: #fdecee; color: #842029; border: 1px solid #f1b0b7; }

input[type=text], input[type=password] {
  font: inherit;
  width: 100%;
  padding: 0.45em 0.6em;
  border: 1px solid #b9c4cf;
  border-radius: 6px;
  background: #fff;
}
input:focus { outline: 2px solid var(--teal); outline-offset: 0; }
label { display: block; font-weight: 600; margin: 0.9em 0 0.3em; text-align: left; }

/* ---------- Entry ---------- */

body.page { padding: 4vh 16px; }
.card-panel {
  margin: 0 auto;
  background: #fff;
  padding: 28px 32px;
  border-radius: 12px;
  border-top: 5px solid var(--blue);
  box-shadow: 0 4px 24px rgba(1, 0, 48, 0.1);
}
.card-panel.narrow { max-width: 420px; }
.brand-h1 { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { height: 1.3em; width: auto; border-radius: 4px; vertical-align: middle; }

.aside-panel {
  max-width: 420px;
  margin: 24px auto 0;
  padding: 20px 32px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.aside-panel p { margin: 0 0 0.8em; color: var(--muted); }

/* ---------- The resource page itself ---------- */

body.rfc-view { padding: 3vh 16px 6vh; }
.rfc-wrap { max-width: 820px; margin: 0 auto; }
.rfc-header { margin-bottom: 1.4em; }
.rfc-description :first-child { margin-top: 0; }
.rfc-description :last-child { margin-bottom: 0; }
.rfc-description ul, .rfc-description ol { margin: 0.5em 0; padding-left: 1.4em; }

/* Row+wrap, not a plain column: a "Half width" item (.rfc-half, flex-basis ~50%) pairs up side by side with
   whichever one follows it, as long as that one's half width too - two halves exactly fill a line, so a third
   in a row always wraps to a fresh one on its own, with no extra JS needed, just flex-wrap arithmetic. A
   full-width row (flex-basis 100%) always starts its own line the same way. align-items: flex-start means a
   shorter neighbour never stretches to match a taller one - they just top-align. */
.rfc-items { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }

/* The organisation's logo, under the resource list (outside .rfc-wrap, not inside it): never wider than its
   own size, the page, or 300px. Extra margin above it (50px, vs. the usual 20px elsewhere) so it reads as
   clearly separate from the list above rather than looking like one more row of it. */
.org-logo { display: block; margin: 50px auto 20px; max-width: min(100%, 300px); height: auto; }
.rfc-row {
  flex: 1 1 100%;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  box-sizing: border-box;
}
.rfc-row.rfc-half { flex: 1 1 calc(50% - 7px); width: calc(50% - 7px); }
@media (max-width: 700px) { .rfc-row.rfc-half { flex: 1 1 100%; width: 100%; } }   /* narrow screens: half width items become full width */
.rfc-row h3 { margin: 0 0 0.3em; font-size: 1.05rem; }
.rfc-row-info :first-child { margin-top: 0; }
.rfc-row-info :last-child { margin-bottom: 0; }
.rfc-row-info ul, .rfc-row-info ol { padding-left: 1.4em; }
.rfc-row-info table { border-collapse: collapse; }
.rfc-row-info td, .rfc-row-info th { border: 1px solid var(--line); padding: 3px 6px; }
.rfc-row-link a, .rfc-row-file a { font-weight: 600; }
.rfc-row-file .rfc-file-name { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 0.2em; }

/* An item's optional decorative image, to the left of its text - two flex children side by side (never a float),
   so the text's own left edge stays a straight line rather than wrapping around the image. max-width: 33% is of
   the row's own current width, which is already halved for a "Half width" row, so no extra arithmetic is needed
   here for that case - it falls out of the percentage being relative to whatever width the row itself ends up. */
.rfc-row-with-image { display: flex; align-items: flex-start; gap: 14px; }
.rfc-row-image { flex: 0 0 auto; max-width: 33%; height: auto; display: block; border-radius: 6px; }
.rfc-row-text { flex: 1 1 auto; min-width: 0; }

.rfc-row.rfc-locked { color: var(--muted); }
.rfc-row.rfc-locked .rfc-lock-msg { font-style: italic; }

.rfc-unlock-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 0.6em; }
.rfc-unlock-form input { margin: 0; }
.rfc-unlock-form .btn { flex: none; }
.rfc-unlock-error { color: var(--danger); font-size: 0.85em; margin-top: 0.4em; }

b, strong { font-weight: 600; }