/* ============================================================================
   SITE STYLES — Het Utrechtse Stadsleger
   ----------------------------------------------------------------------------
   DESIGNER: this file plus templates/base.html are the only two places you
   need. To re-theme the whole site, edit the DESIGN TOKENS block just below —
   every colour, font and key size on the site reads from these variables.
   Everything under "COMPONENTS" simply consumes the tokens.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS  ← change the look of the whole site here
   ---------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --brand:           #0d6efd;   /* primary: links, buttons, accents          */
  --brand-dark:      #0a58ca;   /* hover / active state of brand elements    */
  --brand-contrast:  #ffffff;   /* text/icons on a brand-coloured background  */
  --accent:          #198754;   /* secondary accent (e.g. "add" affordances)  */

  /* Surfaces & text */
  --text:            #212529;
  --muted:           #6c757d;
  --muted-light:     #b8b8b8;   /* dimmed text, e.g. out-of-month calendar days */
  --border:          #ced4da;
  --surface-alt:     #f6f6f6;   /* subtle fill, e.g. out-of-month calendar    */
  --highlight:       #fff3cd;   /* "today" highlight                          */

  /* Navigation bar */
  --navbar-bg:       #1f2733;
  --navbar-fg:       #f8f9fa;

  /* Effects */
  --overlay:         rgba(0, 0, 0, 0.72);   /* dark label over images (e.g. BGG badge) */
  --shadow:          0 1px 5px rgba(0, 0, 0, 0.15);  /* card/thumbnail shadow */

  /* Typography */
  --font-base:       system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout sizes */
  --container-max:   960px;     /* overall page width                         */
  --form-narrow:     520px;     /* compact forms (signup)                     */
  --form-wide:       760px;     /* content forms (pages, games)               */
  --page-banner-h:   340px;     /* fixed height of a page-list banner image    */
  --page-banner-w:   75%;       /* width of a page-list banner image           */

  /* Calendar & matrix */
  --calendar-cell-h: 90px;
  --matrix-game-col: 220px;
}

/* ----------------------------------------------------------------------------
   2. THEME BRIDGE — map Bootstrap's variables onto our tokens so the framework
      (buttons, links, body font) follows the brand automatically.
   ---------------------------------------------------------------------------- */
:root {
  --bs-primary:          var(--brand);
  --bs-link-color:       var(--brand);
  --bs-link-hover-color: var(--brand-dark);
  --bs-body-font-family: var(--font-base);
  --bs-body-color:       var(--text);
}
.btn-primary {
  --bs-btn-bg:                var(--brand);
  --bs-btn-border-color:      var(--brand);
  --bs-btn-hover-bg:          var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg:         var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
}

/* ----------------------------------------------------------------------------
   3. LAYOUT
   ---------------------------------------------------------------------------- */
.site-nav { background: var(--navbar-bg) !important; }
/* Shared title size for items in list views (events, forum, …) so the sections
   stay on one type scale instead of each picking its own size. */
.list-title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
/* Highlight the section we're in (replaces in-page category headers) */
.site-nav .nav-link.active {
  color: var(--navbar-fg);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--brand);
}
.site-container { max-width: var(--container-max); }

/* Reusable layout helpers (use these instead of inline style="...") */
.form-narrow { max-width: var(--form-narrow); }
.form-wide   { max-width: var(--form-wide); }
.list-plain  { list-style: none; padding-left: 0; }
.btn-equal   { min-width: 5rem; }   /* equal-width buttons regardless of label */

/* ----------------------------------------------------------------------------
   4. COMPONENTS
   ---------------------------------------------------------------------------- */

/* Flash messages float as a fixed overlay so they never push the page down */
.message-toasts {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  width: min(92%, 600px);
}

/* Plain auth inputs (login page) without Bootstrap classes */
form input[type="text"],
form input[type="password"],
form input[type="email"] {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
}

/* Calendar */
.calendar-table { table-layout: fixed; }
.calendar-table td {
  height: var(--calendar-cell-h);
  vertical-align: top;
  font-size: 0.85rem;
}
.calendar-daynum { color: var(--muted); font-weight: bold; }
/* The day number itself is the "new event" link for logged-in users. */
.calendar-daynum a { color: inherit; text-decoration: none; }
.calendar-daynum a:hover { color: var(--brand); text-decoration: underline; }
.calendar-out   { background: var(--surface-alt); }
.calendar-out .calendar-daynum { color: var(--muted-light); }
.calendar-today { background: var(--highlight); }
.calendar-event {
  display: block;
  margin-top: 2px;
  padding: 1px 4px;
  background: var(--brand);
  color: var(--brand-contrast);
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Planner matrix */
.gameplanner-table {
  width: auto;            /* size to content instead of stretching full width */
}
.gameplanner-table th { white-space: nowrap; }
.gameplanner-table th:first-child,
.gameplanner-table td:first-child {
  min-width: var(--matrix-game-col);
}
.gameplanner-table th:not(:first-child),
.gameplanner-table td:not(:first-child) {
  text-align: center;
  min-width: 50px;
}
/* Editable status: a custom dropdown so the options can be colour-coded like
   the badges (native <option> colours aren't honoured by every browser). */
.status-picker { position: relative; display: inline-block; vertical-align: middle; }
.status-picker-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 2.4rem;
  padding: 1px 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.status-picker-toggle[data-empty="0"] {
  color: var(--brand-contrast);
  border-color: rgba(0, 0, 0, 0.15);
}
.status-picker-caret { font-size: 0.6em; line-height: 1; }
.status-picker-menu {
  position: fixed;            /* escape the table's overflow clipping */
  transform: translateX(-50%);
  z-index: 1090;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  min-width: max-content;
}
.status-picker-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 3px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 0.8rem;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.status-picker-item:hover,
.status-picker-item:focus { background: var(--surface-alt); }
.status-picker-dash { color: var(--muted); padding: 0 0.2rem; }

/* Status colour key under the matrix */
.status-legend { font-size: 0.72rem; }

/* Highlight the current user's editable column */
.gameplanner-table .gameplanner-me { background: var(--surface-alt); }

/* Status badge — coloured pill; background colour is data-driven (inline). */
.status-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  color: var(--brand-contrast);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* TinyMCE: hide the dialog tab bar when there's only one tab (e.g. the image
   dialog's lone "General" tab after the Upload tab is disabled). */
.tox .tox-dialog__body-nav:has(.tox-tab:only-child) { display: none; }

/* User avatar: uploaded image or initial on a coloured square */
.avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: var(--brand);
  color: var(--brand-contrast);
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg { width: 64px; height: 64px; font-size: 1.6rem; }
.avatar-sm { width: 32px; height: 32px; font-size: 0.85rem; }
.avatar-xs { width: 24px; height: 24px; font-size: 0.7rem; }

/* Page section: light-grey header bar + horizontally padded content */
.section-header {
  background: var(--surface-alt);
  padding: 0.55rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.section-body {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Games grid (BGG-style cover thumbnails) */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.1rem;
}
.game-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s ease;
}
.game-card:hover { transform: translateY(-3px); }
.game-thumb {
  position: relative;
  aspect-ratio: 3 / 4;          /* box-art proportions */
  background: var(--surface-alt);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.game-thumb img { width: 100%; height: 100%; object-fit: cover; }
.game-bgg-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  background: var(--overlay);
  color: var(--brand-contrast);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
}
.game-rules-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 1;
  background: var(--overlay);
  color: var(--brand-contrast);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
}
.game-thumb-placeholder {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--muted-light);
}
.game-card-name {
  margin-top: 0.45rem;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
}
.game-card:hover .game-card-name { color: var(--brand); }

.game-detail-cover {
  max-width: 280px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}

/* Pages list: blog-style feed — full-width image on top, then a bold title
   link, date and excerpt; posts separated by spacing and a hairline rule. */
.page-post {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.page-post:last-child { border-bottom: 0; }
.page-post-img {
  display: block;
  width: 100%;
  max-width: var(--page-banner-w);   /* a little narrower than the column */
  height: var(--page-banner-h);      /* fixed banner; cropped to a uniform size */
  object-fit: cover;
  border-radius: 6px;
  margin: 0 auto 0.85rem;            /* centre the narrower banner */
}
.page-post-title {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.page-post-title a { color: var(--brand); text-decoration: none; }
.page-post-title a:hover { color: var(--brand-dark); text-decoration: underline; }
.page-post-meta { margin-top: 0.5rem; margin-bottom: 0; }
.page-post-excerpt { margin-bottom: 0.6rem; }
.page-post-more { font-weight: 600; text-decoration: none; }
.page-post-more:hover { text-decoration: underline; }

.rule-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.rules-pdf-viewer {
  width: 100%;
  height: 88vh;
  min-height: 720px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
}
.rule-resource-form {
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}
.rule-resource-form:first-child { border-top: 0; }

@media (max-width: 767.98px) {
  .rules-pdf-viewer {
    height: 82vh;
    min-height: 520px;
  }
}