/* Global link styling */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Collapse/accordion toggle buttons: show which panel is open by reusing
   Bootstrap's own "pressed" button look (same vars .btn.active uses). No JS
   needed — Bootstrap already flips aria-expanded on the trigger for us. */
[data-bs-toggle="collapse"][aria-expanded="true"] {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

/* Pie chart stats (fs_render_stat_pie_card / fs_user_stat_charts) */
.fs-stat-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.fs-stat-card {
  min-width: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--fs-radius, .5rem);
  padding: 1.25rem 1.5rem;
  background: var(--fs-surface, var(--bs-body-bg));
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.fs-pie-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.fs-pie-ring {
  --pie-off: light-dark(oklch(91% 0.005 255), oklch(26% 0.005 255));
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.fs-pie-hole {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--fs-surface, var(--bs-body-bg));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--bs-body-color);
  line-height: 1;
}
.fs-pie-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
/* fs_render_stat_pie_card legend rows: dot · label · count · share. */
.fs-pie-body { flex: 1; min-width: 0; }
.fs-pie-title { font-weight: 600; margin-bottom: .4rem; }
.fs-pie-row { display: flex; align-items: center; gap: .5rem; padding: .12rem 0; font-size: .875rem; }
.fs-pie-row .fs-pie-dot { margin: 0; }
.fs-pie-row[data-bs-toggle] { cursor: help; }
.fs-pie-row.is-blink { animation: fs-alert-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fs-pie-row.is-blink { animation: none; color: #ff3b30; } }
.fs-pie-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-pie-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-pie-pct { flex: none; width: 2.6rem; text-align: right; color: var(--fs-ink-muted, var(--bs-secondary-color)); font-variant-numeric: tabular-nums; }
@keyframes fs-alert-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}

/* Event form vote type cards */
.vote-type-grid {
  display: grid;
  gap: .75rem;
}
@media (min-width: 768px) {
  .vote-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.vote-type-option {
  display: block;
  cursor: pointer;
}
.vote-type-card {
  height: 100%;
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem;
  border-radius: var(--fs-radius, .75rem);
  border: 1px solid var(--bs-border-color);
  background: var(--fs-surface, var(--bs-body-bg));
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vote-type-option:hover .vote-type-card {
  border-color: rgba(var(--bs-primary-rgb), .5);
}
@media (prefers-reduced-motion: no-preference) {
  .vote-type-option:active .vote-type-card { transform: var(--fs-press, none); }
}
.vote-type-input:focus-visible + .vote-type-card {
  outline: 2px solid rgba(var(--bs-primary-rgb), .35);
  outline-offset: 2px;
}
.vote-type-input:checked + .vote-type-card {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}
.vote-type-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fs-radius-sm, .65rem);
  background: var(--fs-accent-subtle, rgba(var(--bs-primary-rgb), .08));
  color: var(--bs-primary);
}
.vote-type-icon svg {
  width: 28px;
  height: 28px;
}
.vote-type-title {
  font-weight: 600;
  margin-bottom: .25rem;
}
.vote-type-desc {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: .9rem;
  line-height: 1.3;
}
.vote-type-grid.is-disabled .vote-type-option {
  cursor: default;
}
.vote-type-grid.is-disabled .vote-type-card {
  opacity: .65;
  box-shadow: none;
}
.vote-type-grid.is-disabled .vote-type-option:hover .vote-type-card {
  box-shadow: none;
  transform: none;
}

/* Event form fixed date cards */
.fixed-date-card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--fs-radius, .75rem);
  padding: .85rem;
  background: var(--fs-surface, rgba(var(--bs-primary-rgb), .03));
}
.fixed-date-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}
.fixed-date-title {
  font-weight: 600;
}

/* Generic error page layout */
.fs-error-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  text-align: center;
}
.fs-error-page .fs-error-logo img {
  max-width: 300px;
  height: auto;
  margin-bottom: 1rem;
}

/* Responsive stacking table helper */
@media (max-width: 576px) {
  .stack-table thead { display: none; }
  .stack-table tbody,
  .stack-table tr,
  .stack-table td { display: block; width: 100%; }
  .stack-table tr {
    margin-bottom: .85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--fs-radius, .5rem);
    overflow: hidden;
    background: var(--fs-surface, var(--bs-body-bg));
  }
  .stack-table td {
    padding: .5rem .75rem;
    border: 0 !important;
    border-top: 1px solid var(--bs-border-color-translucent) !important;
  }
  .stack-table td:first-child { border-top: 0 !important; }
  .stack-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
  }
  .stack-table td.text-center { text-align: left !important; }
  .stack-table .btn-group { width: 100%; gap: .25rem; }
  .stack-table .btn-group .btn { flex: 1 1 auto; }
  .stack-table [data-graph] { width: 100%; }
}
/* Shared progress helpers */
.vote-progress .progress-bar {
  transition: width .25s ease-in-out;
}

/* Media gallery grid */
.media-grid {
  display: inline-block;
  padding: 0;
  margin: 0;
}
.media-item {
  list-style: none;
  display: inline-block;
  margin: 3px;
}
.media-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
  max-width: 240px;
  max-height: 180px;
}
.media-thumb img,
.media-thumb video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 180px;
  transition: transform 0.2s ease-in-out;
}
.media-thumb:hover img,
.media-thumb:hover video {
  transform: scale(1.02);
}

/* Modals: cap height and scroll internally by default (like Bootstrap's
   .modal-dialog-scrollable) so oversized popups never get stuck on mobile,
   e.g. when the on-screen keyboard shrinks the viewport. */
.modal-dialog {
  max-height: calc(100% - 1rem);
}
.modal-dialog .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog .modal-body {
  overflow-y: auto;
}

/* Shared skin for every form/data modal in the app (16 call sites).
   Was a solid primary-blue bar matching the old bg-primary navbar; the navbar is
   near-black now, and users_admin.php had already forked a theme-aware version
   of this exact class with the opposite intent. One definition, tokenised — no
   light-dark(), which needs Safari 17.5+ and shipped here with no fallback. */
.modal-header.fs-modal-header {
  /* Fallbacks to Bootstrap's own theme vars: global.css is loaded by every app
     on this core, but tokens.css is opt-in per app, so --fs-* may not exist. */
  background-color: var(--fs-recessed, var(--bs-tertiary-bg));
  border-bottom: 1px solid var(--fs-hairline, var(--bs-border-color));
  padding: .875rem 1.25rem;
}
.modal-header.fs-modal-header .modal-title {
  color: var(--fs-ink, var(--bs-emphasis-color));
  font-weight: 600;
  font-size: 1rem;
}

/* iOS Safari auto-zooms on focus for any input under 16px; form-control-sm/
   form-select-sm are 14px. Bump to 16px on small screens only, so desktop
   keeps the compact sizing. */
@media (max-width: 767.98px) {
  .form-control-sm,
  .form-select-sm {
    font-size: 16px;
  }
}

/* Image viewer (assets/js/fs-lightbox.js).
   The 34 selectors that used to live here themed lightbox2's #lightboxOverlay /
   .lb-* nodes with hardcoded hex; the viewer is now a Bootstrap modal, so it
   inherits the theme and only the scrim needs saying. */
#fsLightboxModal + .modal-backdrop {
  --bs-backdrop-opacity: .92;
}
#fsLightboxModal img {
  /* Transparent PNGs (the payment QRs) need an opaque plate to stay scannable
     in dark mode — a QR on a dark background will not read. */
  background: #fff;
}

/* ── Contextual table row colours: OKLCH, adaptive light/dark ─────────────
   Bootstrap's .table-success/-info/-primary/-warning/-danger ship fixed light
   values, so a tinted row is unreadable in dark mode. These override the
   contextual table vars under [data-bs-theme] purely for specificity over
   Bootstrap's own [data-bs-theme=light]/[data-bs-theme=dark] rules.

   Single source of truth: this block was copy-pasted in three files (fs-ongoo
   users.php, core/pages/users_admin.php, core/event_components.php, the last a
   divergent copy that also added the striped/hover vars now folded in here).
   It drives the login-recency tinting on the users table and the expense-manager
   rows. It lives in global.css, not tokens.css, because it is a Bootstrap defect
   fix rather than a palette choice — Bootstrap ships these classes as fixed light
   values that are unreadable on a dark background — so every app on this core
   gets it, which is also what users_admin.php (Ongoo, Fly_Ongoo) had before.

   Each var is declared twice: a plain oklch() fallback first, then the
   light-dark() form. light-dark() needs Safari 17.5+; older browsers drop the
   second declaration and keep the light pair, which stays internally
   consistent (dark text on a light tint) rather than going invisible.
   ─────────────────────────────────────────────────────────────────────── */
[data-bs-theme] .table-success {
  --bs-table-bg:           oklch(93% 0.09 145);
  --bs-table-bg:           light-dark(oklch(93% 0.09 145),  oklch(19% 0.09 145));
  --bs-table-color:        oklch(16% 0.10 145);
  --bs-table-color:        light-dark(oklch(16% 0.10 145),  oklch(88% 0.09 145));
  --bs-table-striped-bg:   oklch(89% 0.09 145);
  --bs-table-striped-bg:   light-dark(oklch(89% 0.09 145),  oklch(22% 0.09 145));
  --bs-table-border-color: oklch(78% 0.10 145);
  --bs-table-border-color: light-dark(oklch(78% 0.10 145),  oklch(28% 0.09 145));
  --bs-table-striped-color: oklch(16% 0.10 145);
  --bs-table-striped-color: light-dark(oklch(16% 0.10 145),  oklch(88% 0.09 145));
  --bs-table-hover-bg:      oklch(89% 0.09 145);
  --bs-table-hover-bg:      light-dark(oklch(89% 0.09 145),  oklch(22% 0.09 145));
  --bs-table-hover-color:   oklch(16% 0.10 145);
  --bs-table-hover-color:   light-dark(oklch(16% 0.10 145),  oklch(88% 0.09 145));
}
[data-bs-theme] .table-info {
  --bs-table-bg:           oklch(93% 0.05 210);
  --bs-table-bg:           light-dark(oklch(93% 0.05 210),  oklch(19% 0.06 210));
  --bs-table-color:        oklch(16% 0.07 210);
  --bs-table-color:        light-dark(oklch(16% 0.07 210),  oklch(88% 0.07 210));
  --bs-table-striped-bg:   oklch(89% 0.05 210);
  --bs-table-striped-bg:   light-dark(oklch(89% 0.05 210),  oklch(22% 0.06 210));
  --bs-table-border-color: oklch(78% 0.06 210);
  --bs-table-border-color: light-dark(oklch(78% 0.06 210),  oklch(27% 0.06 210));
  --bs-table-striped-color: oklch(16% 0.07 210);
  --bs-table-striped-color: light-dark(oklch(16% 0.07 210),  oklch(88% 0.07 210));
  --bs-table-hover-bg:      oklch(89% 0.05 210);
  --bs-table-hover-bg:      light-dark(oklch(89% 0.05 210),  oklch(22% 0.06 210));
  --bs-table-hover-color:   oklch(16% 0.07 210);
  --bs-table-hover-color:   light-dark(oklch(16% 0.07 210),  oklch(88% 0.07 210));
}
[data-bs-theme] .table-primary {
  --bs-table-bg:           oklch(93% 0.04 255);
  --bs-table-bg:           light-dark(oklch(93% 0.04 255),  oklch(19% 0.05 255));
  --bs-table-color:        oklch(16% 0.06 255);
  --bs-table-color:        light-dark(oklch(16% 0.06 255),  oklch(88% 0.06 255));
  --bs-table-striped-bg:   oklch(89% 0.04 255);
  --bs-table-striped-bg:   light-dark(oklch(89% 0.04 255),  oklch(22% 0.05 255));
  --bs-table-border-color: oklch(78% 0.05 255);
  --bs-table-border-color: light-dark(oklch(78% 0.05 255),  oklch(27% 0.05 255));
  --bs-table-striped-color: oklch(16% 0.06 255);
  --bs-table-striped-color: light-dark(oklch(16% 0.06 255),  oklch(88% 0.06 255));
  --bs-table-hover-bg:      oklch(89% 0.04 255);
  --bs-table-hover-bg:      light-dark(oklch(89% 0.04 255),  oklch(22% 0.05 255));
  --bs-table-hover-color:   oklch(16% 0.06 255);
  --bs-table-hover-color:   light-dark(oklch(16% 0.06 255),  oklch(88% 0.06 255));
}
[data-bs-theme] .table-warning {
  --bs-table-bg:           oklch(93% 0.09 78);
  --bs-table-bg:           light-dark(oklch(93% 0.09 78),   oklch(21% 0.08 73));
  --bs-table-color:        oklch(18% 0.11 68);
  --bs-table-color:        light-dark(oklch(18% 0.11 68),   oklch(89% 0.09 80));
  --bs-table-striped-bg:   oklch(89% 0.09 78);
  --bs-table-striped-bg:   light-dark(oklch(89% 0.09 78),   oklch(24% 0.08 73));
  --bs-table-border-color: oklch(78% 0.10 78);
  --bs-table-border-color: light-dark(oklch(78% 0.10 78),   oklch(30% 0.09 73));
  --bs-table-striped-color: oklch(18% 0.11 68);
  --bs-table-striped-color: light-dark(oklch(18% 0.11 68),   oklch(89% 0.09 80));
  --bs-table-hover-bg:      oklch(89% 0.09 78);
  --bs-table-hover-bg:      light-dark(oklch(89% 0.09 78),   oklch(24% 0.08 73));
  --bs-table-hover-color:   oklch(18% 0.11 68);
  --bs-table-hover-color:   light-dark(oklch(18% 0.11 68),   oklch(89% 0.09 80));
}
[data-bs-theme] .table-danger {
  --bs-table-bg:           oklch(93% 0.06 20);
  --bs-table-bg:           light-dark(oklch(93% 0.06 20),   oklch(19% 0.06 15));
  --bs-table-color:        oklch(18% 0.09 15);
  --bs-table-color:        light-dark(oklch(18% 0.09 15),   oklch(88% 0.07 20));
  --bs-table-striped-bg:   oklch(89% 0.06 20);
  --bs-table-striped-bg:   light-dark(oklch(89% 0.06 20),   oklch(22% 0.06 15));
  --bs-table-border-color: oklch(78% 0.07 20);
  --bs-table-border-color: light-dark(oklch(78% 0.07 20),   oklch(27% 0.07 15));
  --bs-table-striped-color: oklch(18% 0.09 15);
  --bs-table-striped-color: light-dark(oklch(18% 0.09 15),   oklch(88% 0.07 20));
  --bs-table-hover-bg:      oklch(89% 0.06 20);
  --bs-table-hover-bg:      light-dark(oklch(89% 0.06 20),   oklch(22% 0.06 15));
  --bs-table-hover-color:   oklch(18% 0.09 15);
  --bs-table-hover-color:   light-dark(oklch(18% 0.09 15),   oklch(88% 0.07 20));
}

/* Past/inactive badge (EventStatus::FINISHED).
   Neither fixed Bootstrap utility works in both themes: text-bg-dark is
   near-black on a near-black dark-mode surface (~1.06:1 against the card, so
   the badge has no visible shape) and text-bg-light is near-white on a white
   light-mode card. An outlined treatment stays visible on both and reads as
   "past" rather than as another filled status.
   --fs-* fallbacks because tokens.css is opt-in per app. */
.badge.fs-badge-past {
  background-color: transparent;
  color: var(--fs-ink-muted, var(--bs-secondary-color));
  border: 1px solid var(--fs-hairline, var(--bs-border-color));
  font-weight: 600;
}