/* SCORR 2.0 — Component Library · Marker: SCORR_STYLING_v1 */

.scorr-logo { font-family: var(--scorr-font); font-weight: var(--scorr-fw-black); letter-spacing: var(--scorr-letter-tight); color: var(--scorr-electric); font-size: 28px; }
.scorr-logo--lg { font-size: 48px; }
.scorr-logo--sm { font-size: 18px; }
.scorr-logo--gradient { background: linear-gradient(135deg, var(--scorr-electric), var(--scorr-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.scorr-tagline { font-family: var(--scorr-font); font-size: 11px; letter-spacing: var(--scorr-letter-wide); text-transform: uppercase; color: var(--scorr-text-muted); }

.scorr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 0; border-radius: var(--scorr-radius-md); font-family: var(--scorr-font); font-weight: var(--scorr-fw-bold); font-size: 14px; cursor: pointer; transition: background var(--scorr-trans-fast), transform var(--scorr-trans-fast), box-shadow var(--scorr-trans-fast); text-decoration: none; line-height: 1; }
.scorr-btn:active { transform: translateY(1px); }
.scorr-btn--primary { background: var(--scorr-electric); color: var(--scorr-deep); }
.scorr-btn--primary:hover { background: var(--scorr-electric-dim); box-shadow: var(--scorr-shadow-glow); }
.scorr-btn--secondary { background: var(--scorr-slate); color: var(--scorr-text-bright); border: 1px solid var(--scorr-slate-light); }
.scorr-btn--secondary:hover { background: var(--scorr-slate-light); }
.scorr-btn--danger { background: transparent; color: var(--scorr-accent); border: 1px solid var(--scorr-accent); }
.scorr-btn--danger:hover { background: var(--scorr-accent); color: white; }
.scorr-btn--ghost { background: transparent; color: var(--scorr-text-bright); border: 1px solid var(--scorr-slate-light); }
.scorr-btn--ghost:hover { background: rgba(255, 255, 255, 0.04); }
.scorr-btn--xs { padding: 6px 12px; font-size: 12px; }
.scorr-btn--sm { padding: 8px 16px; font-size: 13px; }
.scorr-btn--lg { padding: 16px 32px; font-size: 16px; }
.scorr-btn--block { width: 100%; }

.scorr-card { background: var(--scorr-slate); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--scorr-radius-lg); padding: 20px; }
.scorr-card--deep { background: var(--scorr-deeper); }
.scorr-card--elevated { box-shadow: var(--scorr-shadow-md); }
.scorr-card--glow { border-color: rgba(0, 255, 136, 0.3); box-shadow: var(--scorr-shadow-glow); }

.scorr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--scorr-radius-pill); font-size: 11px; font-weight: var(--scorr-fw-bold); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; }
.scorr-badge--live { background: var(--scorr-accent); color: white; animation: scorr-pulse 2s infinite; }
.scorr-badge--electric { background: var(--scorr-electric); color: var(--scorr-deep); }
.scorr-badge--warning { background: var(--scorr-warning); color: var(--scorr-deep); }
.scorr-badge--info { background: var(--scorr-cyan); color: var(--scorr-deep); }
.scorr-badge--muted { background: var(--scorr-slate-light); color: var(--scorr-text-muted); }

@keyframes scorr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.scorr-live-indicator::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--scorr-accent); margin-right: 6px; animation: scorr-pulse 1.5s infinite; }

.scorr-modal-overlay { position: fixed; inset: 0; background: rgba(7, 9, 28, 0.85); z-index: 9998; display: none; align-items: center; justify-content: center; padding: 16px; }
.scorr-modal-overlay.open { display: flex; }
.scorr-modal { background: var(--scorr-slate); border: 1px solid var(--scorr-slate-light); border-radius: var(--scorr-radius-xl); padding: 24px; max-width: 500px; width: 100%; box-shadow: var(--scorr-shadow-md); }
.scorr-modal__title { font-size: 18px; font-weight: var(--scorr-fw-bold); color: var(--scorr-text-bright); margin: 0 0 8px; }
.scorr-modal__subtitle { font-size: 13px; color: var(--scorr-text-muted); margin-bottom: 20px; }

.scorr-flash { padding: 12px 16px; border-radius: var(--scorr-radius-md); font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.scorr-flash--success { background: rgba(0, 255, 136, 0.1); border-color: rgba(0, 255, 136, 0.3); color: var(--scorr-electric); }
.scorr-flash--error { background: rgba(255, 61, 113, 0.1); border-color: rgba(255, 61, 113, 0.3); color: var(--scorr-accent); }
.scorr-flash--warning { background: rgba(255, 184, 0, 0.1); border-color: rgba(255, 184, 0, 0.3); color: var(--scorr-warning); }

.scorr-input, .scorr-textarea, .scorr-select { width: 100%; padding: 12px 14px; background: var(--scorr-deeper); border: 1px solid var(--scorr-slate-light); border-radius: var(--scorr-radius-md); color: var(--scorr-text-bright); font-family: var(--scorr-font); font-size: 14px; transition: border-color var(--scorr-trans-fast), box-shadow var(--scorr-trans-fast); }
.scorr-input:focus, .scorr-textarea:focus, .scorr-select:focus { outline: none; border-color: var(--scorr-electric); box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.15); }
.scorr-label { display: block; font-size: 12px; font-weight: var(--scorr-fw-semibold); color: var(--scorr-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }

.scorr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.scorr-table th { text-align: left; padding: 12px; font-size: 11px; font-weight: var(--scorr-fw-bold); color: var(--scorr-text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--scorr-slate-light); }
.scorr-table td { padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.scorr-table tr:hover td { background: rgba(255, 255, 255, 0.02); }

.scorr-score { font-family: var(--scorr-font); font-weight: var(--scorr-fw-black); font-size: 64px; letter-spacing: -3px; line-height: 1; color: var(--scorr-text-bright); }
.scorr-score__small { font-size: 32px; letter-spacing: -1px; }
.scorr-score__divider { color: var(--scorr-text-muted); margin: 0 12px; }

@keyframes scorr-goal-flash { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.15); color: var(--scorr-accent); } }
.scorr-goal-anim { animation: scorr-goal-flash 0.6s ease; }
/* ============================================================
   SCORR 2.0 — Mobile layer · Marker: SCORR_MOBILE_v1
   Centrale mobile-friendly verbeteringen. CSS-only,
   geen functionele wijzigingen. Geldt voor alle pagina's
   die scorr-components.css laden.
   ============================================================ */

@media (max-width: 767px) {
  /* iOS zoomt automatisch in op invoervelden < 16px — voorkomen */
  input, select, textarea { font-size: 16px !important; }

  /* Touch-vriendelijke knoppen (Apple-richtlijn: 44px) */
  .scorr-btn { min-height: 44px; }
  .scorr-btn--xs { min-height: 36px; }
  .scorr-btn--sm { min-height: 40px; }

  /* Tabellen: horizontaal scrollen i.p.v. afkappen */
  .scorr-table,
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* Modals passen altijd op het scherm */
  .scorr-modal { max-height: 88vh; overflow-y: auto; }
  .scorr-modal-overlay { padding: 12px; }

  /* Compactere kaarten, scores en koppen */
  .scorr-card { padding: 14px; }
  .scorr-score { font-size: 40px; letter-spacing: -2px; }
  .scorr-score__small { font-size: 24px; }
  .scorr-logo--lg { font-size: 36px; }
}

@media (pointer: coarse) {
  /* Geen blauwe tap-flits op touch-apparaten */
  a, button { -webkit-tap-highlight-color: transparent; }
}