/* Beheer — opbouw zoals het GCC-ledenportaal, in de kleuren van de website:
   zijbalk in Titus-rood, papierwitte achtergrond, witte kaarten, ronde koppen. */

:root {
  --tb-side: #A51514;
  --tb-side-2: rgba(255, 255, 255, .1);
  --tb-side-line: rgba(255, 255, 255, .16);
  --tb-side-text: #FFF4F2;
  --tb-side-muted: rgba(255, 244, 242, .68);
  --tb-paper: #FAF7F2;
  --tb-stone: #F0ECE6;
  --tb-line: #E5DFD6;
  --tb-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --tb-red: #BC1817;
  --tb-red-soft: rgba(188, 24, 23, .18);
}

/* ---------- Zijbalk ---------- */
.fi-sidebar.fi-main-sidebar,
.fi-main-sidebar .fi-sidebar-header,
.fi-main-sidebar .fi-sidebar-nav,
.fi-main-sidebar .fi-sidebar-footer {
  background: var(--tb-side) !important;
}
.fi-main-sidebar { background: linear-gradient(180deg, #B01716 0%, #951210 100%) !important; }
.fi-main-sidebar .fi-sidebar-header, .fi-main-sidebar .fi-sidebar-nav, .fi-main-sidebar .fi-sidebar-footer { background: transparent !important; }
.fi-main-sidebar { border-inline-end: 0 !important; box-shadow: none !important; }
.fi-main-sidebar .fi-sidebar-header {
  border-bottom: 1px solid var(--tb-side-line) !important;
  box-shadow: none !important;
  min-height: 5.25rem;
}
.fi-main-sidebar .fi-sidebar-header .fi-icon-btn { color: var(--tb-side-muted) !important; }

.tb-brand { display: flex; align-items: center; gap: .75rem; }
.tb-brand__logo { width: 2.6rem; height: auto; background: #fff; border-radius: .6rem; padding: .25rem; flex-shrink: 0; }
.tb-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.tb-brand__text strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.tb-brand__text small { font-size: .72rem; font-weight: 600; opacity: .7; }
.fi-main-sidebar .tb-brand { color: #fff; }
/* In de topbar op mobiel en op het inlogscherm staat het merk op een lichte achtergrond */
.fi-topbar .tb-brand, .fi-simple-layout .tb-brand { color: #1D1B1A; }
.dark .fi-topbar .tb-brand, .dark .fi-simple-layout .tb-brand { color: #fff; }
.fi-simple-layout .tb-brand__logo { width: 3.2rem; }

.fi-main-sidebar .fi-sidebar-nav { padding-top: 1rem !important; }
.fi-main-sidebar .fi-sidebar-group-label {
  color: var(--tb-side-muted) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.fi-main-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-main-sidebar .fi-sidebar-group-collapse-btn { color: var(--tb-side-muted) !important; }

.fi-main-sidebar .fi-sidebar-item-btn { border-radius: .65rem !important; padding-block: .6rem !important; }
.fi-main-sidebar .fi-sidebar-item-label { color: var(--tb-side-text) !important; font-weight: 600 !important; }
.fi-main-sidebar .fi-sidebar-item-icon { color: var(--tb-side-muted) !important; }
.fi-main-sidebar .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-item-btn:focus-visible { background: var(--tb-side-2) !important; }
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: #fff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #1D1B1A !important; }
.fi-main-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--tb-red) !important; }
.fi-main-sidebar .fi-sidebar-item-grouped-border-part { background: var(--tb-side-line) !important; }
.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge { background: #fff !important; color: var(--tb-red) !important; }

/* Voetbalk: bug melden · patchnotes · roadmap, met de versie eronder */
.fi-main-sidebar .fi-sidebar-footer { border-top: 1px solid var(--tb-side-line); padding: .9rem 1rem !important; }
.tb-foot__row { display: flex; gap: .45rem; }
.tb-foot__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; flex: 1;
  padding: .5rem .75rem; border-radius: .6rem; border: 1px solid var(--tb-side-line);
  background: var(--tb-side-2); color: var(--tb-side-text); font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.tb-foot__btn--icon { flex: 0 0 auto; width: 2.35rem; padding-inline: 0; }
.tb-foot__btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); color: #fff; }
.tb-foot__ico { width: 1rem; height: 1rem; }
.tb-foot__ver { margin: .7rem 0 0; text-align: center; font-size: .72rem; font-weight: 600; color: var(--tb-side-muted); }
/* Ingeklapte zijbalk: alleen de iconen */
.fi-main-sidebar:not(.fi-sidebar-open) .tb-foot { display: none; }

/* ---------- Topbar ---------- */
.tb-back {
  display: inline-flex; align-items: center; gap: .4rem; margin-inline-end: .5rem;
  padding: .4rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  color: var(--tb-red); background: rgba(188, 24, 23, .07); border: 1px solid rgba(188, 24, 23, .16);
  text-decoration: none; white-space: nowrap;
}
.tb-back:hover { background: rgba(188, 24, 23, .12); }
.tb-back__ico { width: 1rem; height: 1rem; }
@media (max-width: 640px) { .tb-back span { display: none; } .tb-back { padding: .45rem; } }

/* ---------- Dashboard ---------- */
.tb-dash { display: grid; gap: 1.25rem; }
.tb-hello h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.tb-hello p { margin: .25rem 0 0; color: rgb(120 113 108); }
.tb-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.dark .tb-tabs { border-color: rgba(255, 255, 255, .1); }
.tb-tab {
  display: inline-flex; align-items: center; gap: .45rem; padding: .7rem .1rem; margin-bottom: -1px;
  font-weight: 600; font-size: .92rem; color: rgb(120 113 108); background: none; border: 0;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.tb-tab.is-active { color: var(--tb-red); border-bottom-color: var(--tb-red); }
.tb-tab .fi-icon { width: 1.1rem; height: 1.1rem; }

.tb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.tb-stat { display: block; text-decoration: none; color: inherit; transition: transform .15s; }
.tb-stat:hover { transform: translateY(-2px); }
.tb-stat strong { display: block; font-size: 2rem; font-weight: 800; line-height: 1; }
.tb-stat span { display: block; margin-top: .4rem; font-size: .85rem; color: rgb(120 113 108); }
.tb-stat.is-alert strong { color: var(--tb-red); }

.tb-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; align-items: start; }

.tb-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.tb-album {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: .65rem; overflow: hidden;
  background: #EFEBE5; text-decoration: none;
}
.tb-album img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tb-album:hover img { transform: scale(1.05); }
.tb-album span {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem .6rem .5rem; color: #fff; font-size: .8rem; font-weight: 700;
  line-height: 1.25; background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}

.tb-events { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.tb-event { display: flex; align-items: center; gap: .9rem; padding: .55rem .25rem; border-radius: .5rem; text-decoration: none; color: inherit; }
.tb-event:hover { background: rgba(0, 0, 0, .03); }
.dark .tb-event:hover { background: rgba(255, 255, 255, .04); }
.tb-date {
  flex: 0 0 3.2rem; display: flex; flex-direction: column; align-items: center; padding: .35rem 0; border-radius: .5rem;
  background: color-mix(in srgb, var(--sp, #1D1B1A) 11%, transparent); border-left: 3px solid var(--sp, #1D1B1A);
}
.tb-date b { font-size: 1.2rem; font-weight: 800; line-height: 1; }
.tb-date small { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.tb-event__main { min-width: 0; }
.tb-event__main strong { display: block; font-size: .92rem; }
.tb-event__main strong.is-cancelled { text-decoration: line-through; opacity: .6; }
.tb-event__main span { display: block; font-size: .8rem; color: rgb(120 113 108); }
.tb-empty { font-size: .88rem; color: rgb(120 113 108); margin: 0; }

.tb-news { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.tb-news a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .25rem; border-radius: .5rem; text-decoration: none; color: inherit; font-size: .9rem; font-weight: 600; }
.tb-news a:hover { background: rgba(0, 0, 0, .03); }
.tb-news time { flex-shrink: 0; font-size: .78rem; font-weight: 500; color: rgb(120 113 108); }

.tb-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tb-checks li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.tb-checks .fi-icon { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.tb-checks .ok { color: #16a34a; }
.tb-checks .warn { color: #d97706; }
.tb-checks a { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--tb-red); text-decoration: none; }

/* ---------- Inhoud in de stijl van de website ---------- */
html:not(.dark) .fi-body, html:not(.dark) .fi-main-ctn, html:not(.dark) .fi-layout { background: var(--tb-paper) !important; }
html:not(.dark) .fi-topbar, html:not(.dark) .fi-topbar-ctn > nav { background: rgba(255, 255, 255, .94) !important; border-bottom: 1px solid var(--tb-line) !important; box-shadow: none !important; }
.fi-header-heading, .fi-section-header-heading, .fi-modal-heading, .tb-hello h2 { font-family: var(--tb-display); letter-spacing: -.015em; }
.fi-header-heading { font-weight: 800 !important; }
html:not(.dark) .fi-section, html:not(.dark) .fi-ta-ctn, html:not(.dark) .fi-wi-stats-overview-stat { border-radius: 16px !important; box-shadow: 0 1px 2px rgba(29, 27, 26, .06), 0 6px 24px rgba(29, 27, 26, .07) !important; --tw-ring-color: transparent !important; }
.fi-btn { border-radius: 999px !important; }
.fi-simple-layout { background: radial-gradient(700px 400px at 100% 0%, rgba(188, 24, 23, .08), transparent 60%), radial-gradient(600px 360px at 0% 100%, rgba(133, 129, 128, .12), transparent 60%), var(--tb-paper) !important; }

/* Het merk staat in de balk bovenin; geef dat blok de kleur van de zijbalk,
   zodat het één geheel vormt zoals in het ledenportaal. */
@media (min-width: 1024px) {
  .fi-topbar { position: relative; }
  .fi-topbar::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 17rem;
    background: linear-gradient(180deg, #B01716 0%, #AB1615 100%);
  }
  .fi-topbar > *, .fi-topbar-ctn > * { position: relative; z-index: 1; }
  .fi-topbar .fi-logo, .fi-topbar .tb-brand { color: #fff !important; }
  .fi-main-sidebar .fi-sidebar-header { border-bottom: 0 !important; min-height: 0; }
}

/* ---------- Samenvatting van de rechten bij een account ---------- */
.tb-rechten__kop { font-size: .82rem; font-weight: 700; margin: 0 0 .35rem; }
.tb-rechten__leeg { font-size: .85rem; opacity: .75; margin: 0; }
.tb-rechten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .15rem .9rem; margin: 0; padding: 0; list-style: none; }
.tb-rechten li { position: relative; padding-inline-start: 1.05rem; font-size: .82rem; line-height: 1.5; opacity: .85; }
.tb-rechten li::before { content: ""; position: absolute; inset-inline-start: .25rem; top: .58em; width: .32rem; height: .32rem; border-radius: 50%; background: var(--tb-red); }

/* ---------- Foutpagina van het portaal (staat los van Filament) ---------- */
.tb-fout {
  margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  font: 400 1rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1d1b1a;
  background: radial-gradient(700px 400px at 100% 0%, rgba(188, 24, 23, .1), transparent 60%),
              radial-gradient(600px 360px at 0% 100%, rgba(133, 129, 128, .14), transparent 60%), var(--tb-paper);
}
.tb-fout__kaart { max-width: 30rem; width: 100%; background: #fff; border-radius: 20px; padding: 40px 32px; text-align: center; box-shadow: 0 1px 2px rgba(29, 27, 26, .06), 0 10px 36px rgba(29, 27, 26, .1); }
.tb-fout__logo { width: 64px; height: auto; }
.tb-fout__code { margin: 14px 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #857f7e; }
.tb-fout h1 { margin: 0 0 .5em; font-family: var(--tb-display); font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.tb-fout__tekst { margin: 0 0 1.6em; color: #4a4644; }
.tb-fout__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.tb-knop { display: inline-flex; align-items: center; justify-content: center; padding: .75em 1.4em; border-radius: 999px; border: 2px solid var(--tb-line); background: #fff; color: #1d1b1a; font-weight: 700; font-size: .95rem; text-decoration: none; }
.tb-knop:hover { border-color: var(--tb-red); }
.tb-knop--primair { background: var(--tb-red); border-color: var(--tb-red); color: #fff; }
.tb-knop--primair:hover { background: #9D1413; border-color: #9D1413; }
.tb-fout__hulp { margin: 1.6em 0 0; font-size: .86rem; color: #857f7e; }

/* ---------- Systeemonderhoud ---------- */
.tb-onderhoud { display: grid; gap: 14px; }
.tb-check { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--tb-line); background: #fff; }
.tb-check.is-ok { border-color: rgba(22, 163, 74, .3); background: rgba(22, 163, 74, .05); }
.tb-check.is-warn { border-color: rgba(217, 119, 6, .35); background: rgba(217, 119, 6, .06); }
.tb-check svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.tb-check.is-ok svg { color: #16a34a; }
.tb-check.is-warn svg { color: #d97706; }
.tb-check strong { display: block; font-size: .95rem; font-weight: 700; }
.tb-check p { margin: .25rem 0 0; font-size: .85rem; opacity: .8; }
.tb-onderhoud__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tb-uitvoer { margin: 0; padding: 14px 16px; border-radius: 12px; background: #1d1b1a; color: #f0ece6; font-size: .8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.tb-onderhoud__voet { margin: 6px 0 0; font-size: .85rem; opacity: .75; }