/* ============================================================
   Gelsenkirchen Fenerbahçeliler Derneği – Brand v6
   Redesign: cleaner, more user-friendly, mobile-first
   Colors: deep navy + gold + white, inspired by club identity
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Core brand */
  --navy:        #061843;
  --navy-mid:    #0d2257;
  --navy-light:  #153070;
  --gold:        #f5c400;
  --gold-dark:   #c99b00;
  --gold-subtle: rgba(245,196,0,.12);
  --red:         #d71920;

  /* Surfaces */
  --bg:          #07111f;
  --surface:     #0d1e35;
  --surface-2:   #112244;
  --surface-3:   rgba(255,255,255,.05);
  --border:      rgba(245,196,0,.18);
  --border-soft: rgba(255,255,255,.10);

  /* Text */
  --text:        #f0f4ff;
  --text-muted:  #8fa3c0;
  --text-dim:    #5a739a;

  /* Feedback */
  --green:       #22c55e;
  --green-bg:    rgba(34,197,94,.12);
  --red-bg:      rgba(215,25,32,.14);

  /* Spacing & Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Typography */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.28);
  --shadow-md:  0 6px 24px rgba(0,0,0,.35);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.42);
  --glow-gold:  0 0 0 2px rgba(245,196,0,.45);
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body) !important;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text) !important;
  background:
    radial-gradient(ellipse 80% 40% at 10% 0%, rgba(245,196,0,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(6,24,67,.80) 0%, transparent 70%),
    linear-gradient(165deg, #061843 0%, #07111f 50%, #050d1a 100%) !important;
  min-height: 100vh;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.5rem, 4vw, 2.2rem) !important; }
h2 { font-size: clamp(1.25rem, 3vw, 1.7rem) !important; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.3rem) !important; }

p { color: var(--text); margin: 0 0 1rem; }

a            { color: var(--gold); text-decoration: none; transition: color .2s; }
a:hover      { color: #ffe16b; }

small, .sub, .muted { color: var(--text-muted) !important; font-size: .85em; }
label, th           { color: var(--text-muted) !important; font-size: .85em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ── Layout: Sidebar ───────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #061843 0%, #07111f 100%) !important;
  border-right: 1px solid var(--border) !important;
  padding: 0 !important;
}

/* Club header in sidebar */
.sidebar h1 {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 20px 20px 16px !important;
  color: var(--text) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--border);
  margin: 0 !important;
}

.sidebar h1::before {
  content: "";
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: url('/assets/verein-emblem.png') center/cover no-repeat;
  box-shadow: var(--glow-gold), var(--shadow-sm);
}

/* Sidebar navigation links */
.sidebar nav a {
  display: flex;
  align-items: center;
  padding: 12px 20px !important;
  color: var(--text-muted) !important;
  font-size: .9rem;
  font-weight: 500;
  border-left: 3px solid transparent !important;
  transition: all .2s ease;
}

.sidebar nav a:hover,
.sidebar nav a.active {
  background: var(--gold-subtle) !important;
  border-left-color: var(--gold) !important;
  color: var(--text) !important;
  text-decoration: none !important;
}

/* ── Main Content Area ─────────────────────────────────────── */
.main {
  color: var(--text) !important;
  padding: 28px !important;
}

/* ── Cards & Panels ────────────────────────────────────────── */
.panel, .card, .mobile-card, .stat {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 24px !important;
}

/* Top-level login/action card */
body > .card {
  max-width: 480px !important;
  margin: auto !important;
  padding: 40px 36px !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

body > .card::before {
  content: "";
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: url('/assets/verein-emblem.png') center/cover no-repeat;
  box-shadow: var(--glow-gold), var(--shadow-md);
}

/* Stats cards */
.stat {
  text-align: center;
  padding: 20px !important;
  transition: transform .2s, box-shadow .2s;
}
.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg) !important;
}
.stat .value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold) !important;
}

/* ── Dividers ──────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 20px 0;
}

/* ── Forms ─────────────────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=search],
select,
textarea {
  width: 100% !important;
  background: rgba(255,255,255,.96) !important;
  color: #111827 !important;
  border: 1.5px solid rgba(245,196,0,.30) !important;
  border-radius: var(--r-sm) !important;
  padding: 11px 14px !important;
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  transition: border-color .2s, box-shadow .2s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(245,196,0,.18) !important;
  outline: none !important;
}

/* Form group spacing */
.form-group, .field {
  margin-bottom: 18px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn,
button[type=submit],
button:not([style]):not([class*=close]):not([class*=toggle]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px !important;
  font-family: var(--font-display) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  border-radius: var(--r-sm) !important;
  border: 1.5px solid rgba(245,196,0,.35) !important;
  background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy-mid) 100%) !important;
  color: #fff !important;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.btn:hover,
button[type=submit]:hover,
button:not([style]):not([class*=close]):not([class*=toggle]):hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  color: var(--navy) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(245,196,0,.30) !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Primary gold button */
.btn.primary,
button[type=submit] {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  color: var(--navy) !important;
  border-color: var(--gold-dark) !important;
}
.btn.primary:hover,
button[type=submit]:hover {
  background: linear-gradient(135deg, #ffe040 0%, var(--gold) 100%) !important;
  color: var(--navy) !important;
  box-shadow: 0 6px 20px rgba(245,196,0,.40) !important;
}

.btn.secondary {
  background: var(--surface-3) !important;
  border-color: var(--border-soft) !important;
  color: var(--text) !important;
}

.btn.danger { background: var(--red-bg) !important; border-color: rgba(215,25,32,.35) !important; color: #fca5a5 !important; }
.btn.danger:hover { background: var(--red) !important; color: #fff !important; }

/* Button groups */
.btn + .btn,
.btn + form,
form + .btn,
form + form,
button + button { margin-left: 8px; }

.inline-form { gap: 10px !important; flex-wrap: wrap; }

/* ── Badges ────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.badge.ok   { background: rgba(34,197,94,.15) !important;  color: #86efac !important; border: 1px solid rgba(34,197,94,.25); }
.badge.warn { background: rgba(245,196,0,.15) !important;  color: #fde68a !important; border: 1px solid rgba(245,196,0,.25); }
.badge.err  { background: rgba(215,25,32,.15) !important;  color: #fca5a5 !important; border: 1px solid rgba(215,25,32,.25); }
.badge.info { background: rgba(59,130,246,.15) !important; color: #93c5fd !important; border: 1px solid rgba(59,130,246,.25); }

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-size: .9rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.alert.ok  { background: var(--green-bg) !important;  color: #bbf7d0 !important; border: 1px solid rgba(34,197,94,.25); }
.alert.err,
.err       { background: var(--red-bg) !important;    color: #fecaca !important; border: 1px solid rgba(215,25,32,.25); }
.alert.warn{ background: rgba(245,196,0,.12) !important; color: #fde68a !important; border: 1px solid rgba(245,196,0,.25); }

/* ── Tables ────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text) !important;
  font-size: .9rem;
}

thead tr {
  border-bottom: 2px solid var(--border);
}

th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  color: var(--text-muted) !important;
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft) !important;
  vertical-align: middle;
}

tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--surface-3); }
tbody tr:last-child td { border-bottom: none !important; }

/* ── Code ──────────────────────────────────────────────────── */
code {
  background: rgba(255,255,255,.10) !important;
  color: #fde68a !important;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .87em;
}

/* ── Utility ───────────────────────────────────────────────── */
.text-gold   { color: var(--gold) !important; }
.text-muted  { color: var(--text-muted) !important; }
.bg-surface  { background: var(--surface) !important; }
.rounded     { border-radius: var(--r-md) !important; }

/* Gold accent line (decorative) */
.accent-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: var(--r-full);
  margin-bottom: 24px;
}

/* Section headings with gold underline */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--text);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--navy-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body { background: var(--bg) !important; }

  .main { padding: 16px !important; }

  .sidebar h1 { padding: 16px !important; }
  .sidebar h1::before { width: 36px; height: 36px; flex-basis: 36px; }

  body > .card {
    max-width: 100% !important;
    padding: 28px 20px !important;
    border-radius: var(--r-lg) !important;
    margin: 16px !important;
  }
  body > .card::before { width: 72px; height: 72px; margin-bottom: 18px; }

  .panel, .card, .mobile-card, .stat {
    border-radius: var(--r-md) !important;
    padding: 18px !important;
  }

  .btn,
  button[type=submit],
  button:not([style]):not([class*=close]):not([class*=toggle]) {
    width: 100%;
    margin: 6px 0 0 0 !important;
  }

  .btn + .btn,
  .btn + form,
  form + .btn,
  form + form,
  button + button { margin-left: 0; }

  .inline-form { display: flex; flex-direction: column; }

  table { font-size: .82rem; }
  th, td { padding: 9px 10px; }
}

@media (max-width: 400px) {
  body > .card { margin: 10px !important; padding: 24px 16px !important; }
}