/**
 * @file style.css
 * @description Gedeelde stijlen voor de gehele SL-ridetrack applicatie.
 *
 * Inhoudsopgave:
 *  1.  CSS variabelen   – kleurenpalet & design tokens
 *  2.  Reset & basis    – globale box-model reset en body
 *  3.  Header           – logo + paginatitel + navigatie
 *  4.  Layout           – main wrapper
 *  5.  Formulieren      – inputs, labels, knoppen
 *  6.  Sectie           – label + scheiding per groep
 *  7.  Kaarten grid     – responsive kolommen
 *  8.  Marathon kaart   – kaart basis + hover border
 *  9.  Kaart inhoud     – titel & beschrijving
 *  10. Hover overlay    – donker scherm met navigatielinks
 *  11. Tabel            – uitslagen en lijsten
 *  12. Badges           – status labels
 *  13. Lege staat       – melding als er geen data is
 *  14. Flash berichten  – succes/fout meldingen
 *  15. Modale dialoog   – popup vensters
 */

/* ==========================================================================
   1. CSS variabelen
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg:           #f5f4f0;
  --surface:      #ffffff;
  --border:       #d8d5ce;
  --text:         #1a1916;
  --muted:        #7a7670;
  --accent:       #1a1916;
  --hover-bg:     #1a1916;
  --hover-text:   #f5f4f0;
  --tag-bg:       #eae8e2;
  --danger:       #c0392b;
  --danger-light: #fdf0ef;
  --success:      #27ae60;
  --success-light:#edfaf3;
}

/* ==========================================================================
   2. Reset & basis
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

body {
  font-family: 'DM Sans', sans-serif;
  background:  var(--bg);
  color:       var(--text);
  min-height:  100vh;
}

a {
  color: var(--text);
}

/* ==========================================================================
   3. Header
   ========================================================================== */

header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         18px 40px;
  border-bottom:   1.5px solid var(--border);
  background:      var(--surface);
  position:        sticky;
  top:             0;
  z-index:         100;
}

.header-left {
  display:     flex;
  align-items: center;
  gap:         14px;
}


.logo-box {
  width:       40px;
  height:      40px;
  border:      1.5px solid var(--border);
  position:    relative;
  flex-shrink: 0;
  overflow:    hidden;
}

.logo-box::before {
  content:  '';
  position: absolute;
  inset:    0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--border) 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to bottom left,  transparent calc(50% - 0.6px), var(--border) 50%, transparent calc(50% + 0.6px));
}

.site-title {
  font-family:    'DM Mono', monospace;
  font-size:      1.1rem;
  font-weight:    500;
  letter-spacing: -0.01em;
  text-decoration: none;
  color:          var(--text);
}

nav {
  display: flex;
  gap:     8px;
}

.nav-link {
  font-family:     'DM Mono', monospace;
  font-size:       0.72rem;
  font-weight:     500;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-decoration: none;
  color:           var(--muted);
  padding:         6px 14px;
  border:          1px solid transparent;
  transition:      border-color 0.15s, color 0.15s;
}

.nav-link:hover,
.nav-link.active {
  color:        var(--text);
  border-color: var(--border);
}

.nav-link.logout {
  color:        var(--danger);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

main {
  padding:   40px;
  justify-content: center;
  align-items:  center;
  flex-direction: column;
  display: flex;
}

.page-title {
  font-family:   'DM Mono', monospace;
  font-size:     1rem;
  font-weight:   500;
  /* margin-bottom: 32px; */
}

.page-actions {
  margin-bottom:   24px;
  display:  flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   5. Formulieren
   ========================================================================== */

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  20px;
}

label {
  font-family:    'DM Mono', monospace;
  font-size:      0.68rem;
  font-weight:    500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="time"],
select,
textarea {
  font-family:   'DM Sans', sans-serif;
  font-size:     0.85rem;
  color:         var(--text);
  background:    var(--surface);
  border:        1.5px solid var(--border);
  padding:       10px 14px;
  outline:       none;
  transition:    border-color 0.15s;
  width:         100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

textarea {
  resize:     vertical;
  min-height: 100px;
}

/* Knoppen */
.btn {
  font-family:     'DM Mono', monospace;
  font-size:       0.74rem;
  font-weight:     500;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  text-decoration: none;
  display:         inline-block;
  padding:         10px 24px;
  border:          1.5px solid var(--accent);
  background:      var(--accent);
  color:           var(--hover-text);
  cursor:          pointer;
  transition:      background 0.15s, color 0.15s;
}

.btn:hover {
  background: transparent;
  color:      var(--accent);
}

.btn-outline {
  background: transparent;
  color:      var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color:      var(--hover-text);
}

.btn-danger {
  border-color: var(--danger);
  background:   var(--danger);
  color:        #fff;
}
.conbtn {
  font-family:     'DM Mono', monospace;
  font-size:       0.74rem;
  font-weight:     500;
  letter-spacing:  0.07em;
  text-transform:  uppercase;
  text-decoration: none;
  display:         inline-block;
  padding:         10px 24px;
  border:          1.5px solid var(--accent);
  background:      var(--accent);
  color:           var(--hover-text);
  cursor:          pointer;
  transition:      background 0.15s, color 0.15s;
}

.conbtn:hover {
  background: transparent;
  color:  #2e7d32;
}

.conbtn-outline {
  background: transparent;
  color: #2e7d32;
}

.conbtn-outline:hover {
  background: #2e7d32;
  color:  #fff;
}

.btn-danger:hover {
  background: transparent;
  color:      var(--danger);
}

.btn-sm {
  font-size: 0.68rem;
  padding:   6px 14px;
}

/* ==========================================================================
   6. Sectie
   ========================================================================== */

.section {
  margin-bottom: 52px;
  min-width: 100rem;
}

.section-label {
  font-family:    'DM Mono', monospace;
  font-size:      0.68rem;
  font-weight:    500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  16px;
  padding-bottom: 10px;
  border-bottom:  1px solid var(--border);
}

/* ==========================================================================
   7. Kaarten grid
   ========================================================================== */

.cards-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   16px;
}

/* ==========================================================================
   8. Marathon kaart
   ========================================================================== */

.marathon-card {
  background: var(--surface);
  border:     1.5px solid var(--border);
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
  transition: border-color 0.18s;
}

.marathon-card:hover {
  border-color: var(--accent);
}

/* ==========================================================================
   9. Kaart inhoud
   ========================================================================== */

.card-body {
  padding: 24px 20px;
}

.card-title {
  font-family:   'DM Mono', monospace;
  font-size:     0.88rem;
  font-weight:   500;
  margin-bottom: 10px;
  text-align:    center;
}

.card-meta {
  font-family:   'DM Mono', monospace;
  font-size:     0.68rem;
  color:         var(--muted);
  text-align:    center;
  margin-bottom: 10px;
}

.card-desc {
  font-size:   0.78rem;
  line-height: 1.65;
  color:       var(--muted);
  text-align:  center;
}

/* ==========================================================================
   10. Hover overlay
   ========================================================================== */

.card-overlay {
  position:        absolute;
  inset:           0;
  background:      var(--hover-bg);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  opacity:         0;
  transition:      opacity 0.2s ease;
  pointer-events:  none;
}

.marathon-card:hover .card-overlay {
  opacity:        1;
  pointer-events: all;
}

.overlay-label {
  font-family:    'DM Mono', monospace;
  font-size:      0.62rem;
  color:          rgba(255, 255, 255, 0.35);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom:  6px;
}

.overlay-link {
  display:         block;
  font-family:     'DM Mono', monospace;
  font-size:       0.76rem;
  font-weight:     500;
  letter-spacing:  0.06em;
  color:           var(--hover-text);
  text-decoration: none;
  padding:         9px 0;
  border:          1px solid rgba(255, 255, 255, 0.2);
  width:           190px;
  text-align:      center;
  transition:      background 0.14s, color 0.14s;
}

.overlay-link:hover {
  background: var(--hover-text);
  color:      var(--hover-bg);
}

/* ==========================================================================
   11. Tabel
   ========================================================================== */

.data-table {
  width:           100%;
  border-collapse: collapse;
  background:      var(--surface);
  border:          1.5px solid var(--border);
}

.data-table th {
  font-family:    'DM Mono', monospace;
  font-size:      0.65rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--muted);
  padding:        10px 16px;
  text-align:     left;
  border-bottom:  1.5px solid var(--border);
  background:     var(--tag-bg);
}

.data-table td {
  font-size:     0.82rem;
  padding:       12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--bg);
}

/* ==========================================================================
   12. Badges
   ========================================================================== */

.badge {
  font-family:    'DM Mono', monospace;
  font-size:      0.6rem;
  font-weight:    500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        3px 8px;
  display:        inline-block;
}

.badge-actief   { background: var(--success-light); color: var(--success); }
.badge-gepland  { background: var(--tag-bg);        color: var(--muted);   }
.badge-afgelopen{ background: #eee;                 color: #999;           }

/* ==========================================================================
   13. Lege staat
   ========================================================================== */

.empty-state {
  font-family: 'DM Mono', monospace;
  font-size:   0.75rem;
  color:       var(--muted);
  padding:     32px 0;
  text-align:  center;
}

/* ==========================================================================
   14. Flash berichten
   ========================================================================== */

.flash {
  font-family:   'DM Mono', monospace;
  font-size:     0.75rem;
  padding:       12px 20px;
  margin-bottom: 24px;
  border-left:   3px solid;
}

.flash-success {
  background:   var(--success-light);
  border-color: var(--success);
  color:        var(--success);
}

.flash-error {
  background:   var(--danger-light);
  border-color: var(--danger);
  color:        var(--danger);
}

/* ==========================================================================
   15. Modale dialoog
   ========================================================================== */

.modal-backdrop {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       rgba(0, 0, 0, 0.45);
  z-index:          200;
  align-items:      center;
  justify-content:  center;
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  background: var(--surface);
  border:     1.5px solid var(--border);
  padding:    36px;
  width:      100%;
  max-width:  480px;
}

.modal-title {
  font-family:   'DM Mono', monospace;
  font-size:     0.88rem;
  font-weight:   500;
  margin-bottom: 24px;
}

.modal-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
  margin-top:      28px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  header     { padding: 16px 20px; }
  main       { padding: 24px 20px; }
  nav        { display: none; }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }
}