/* ============================================
   GolfStat.dk — theme.css
   Global variables, resets and shared components
   ============================================ */

/* ── Colour palette ── */
:root {
  --gs-bg:           #060e06;
  --gs-surface:      #0a120a;
  --gs-surface-alt:  #0f1a0f;
  --gs-surface-input:#142014;
  --gs-border:       #1e3320;
  --gs-border-mid:   #2a4a22;
  --gs-green:        #7ec85a;
  --gs-green-mid:    #4a9e28;
  --gs-green-dk:     #3B6D11;
  --gs-green-light:  #c8f0a0;
  --gs-muted:        #7ab060;
  --gs-text:         #e8f5e0;
  --gs-text-dim:     #a0c080;
  --gs-amber:        #EF9F27;
  --gs-red:          #F09595;
  --gs-red-bg:       #2e1414;
  --gs-red-border:   #791F1F;
  --gs-teal:         #9FE1CB;
  --gs-teal-bg:      #0a2a22;
  --gs-teal-border:  #0F6E56;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: sans-serif;
  background: var(--gs-bg);
  color: var(--gs-text);
  min-height: 100vh;
  line-height: 1.5;
}

a {
  color: var(--gs-green-mid);
  text-decoration: none;
}

a:hover {
  color: var(--gs-green);
}

/* ── Typography ── */
h1 { font-size: 28px; font-weight: 500; color: var(--gs-text); }
h2 { font-size: 20px; font-weight: 500; color: var(--gs-text); }
h3 { font-size: 16px; font-weight: 500; color: var(--gs-text); }

.label-upper {
  font-size: 11px;
  color: var(--gs-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Logo / brand ── */
.brand-name {
  font-size: 28px;
  font-weight: 500;
  color: var(--gs-green);
  letter-spacing: -0.02em;
}

.brand-domain {
  font-size: 13px;
  color: var(--gs-muted);
  margin-top: 4px;
}

.logo-dot {
  width: 7px;
  height: 7px;
  background: var(--gs-green-mid);
  border-radius: 50%;
  display: inline-block;
}

/* ── Topbar (shared across all inner pages) ── */
.topbar {
  background: var(--gs-surface);
  border-bottom: 0.5px solid var(--gs-border);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-logo {
  font-size: 15px;
  font-weight: 500;
  color: var(--gs-green);
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-info {
  font-size: 12px;
  color: var(--gs-muted);
}

/* ── Form inputs ── */
.field {
  width: 100%;
  margin-bottom: 14px;
}

.field-label {
  font-size: 11px;
  color: var(--gs-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

.field-input {
  width: 100%;
  background: var(--gs-surface-input);
  border: 0.5px solid var(--gs-border-mid);
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--gs-text);
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}

.field-input::placeholder {
  color: var(--gs-border-mid);
}

.field-input:focus {
  border-color: var(--gs-green-mid);
}

/* ── Buttons ── */
.btn-primary {
  width: 100%;
  padding: 13px;
  border-radius: 9px;
  border: none;
  background: var(--gs-green-dk);
  color: var(--gs-green-light);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  text-align: center;
  display: block;
}

.btn-primary:hover {
  background: var(--gs-green-mid);
}

.btn-secondary {
  width: 100%;
  padding: 13px;
  border-radius: 9px;
  border: 0.5px solid var(--gs-border-mid);
  background: transparent;
  color: var(--gs-green);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  text-align: center;
  display: block;
}

.btn-secondary:hover {
  border-color: var(--gs-green-mid);
  color: var(--gs-green-light);
}

/* ── Alerts / messages ── */
.alert-error {
  width: 100%;
  background: var(--gs-red-bg);
  border: 0.5px solid var(--gs-red-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gs-red);
  margin-bottom: 16px;
}

.alert-success {
  width: 100%;
  background: var(--gs-teal-bg);
  border: 0.5px solid var(--gs-teal-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--gs-teal);
  margin-bottom: 16px;
}

/* ── Divider with text ── */
.divider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0;
}

.divider-row .line {
  flex: 1;
  height: 0.5px;
  background: var(--gs-border);
}

.divider-row .text {
  font-size: 11px;
  color: var(--gs-muted);
}

/* ── Credit line ── */
.credit {
  font-size: 11px;
  color: var(--gs-border-mid);
  text-align: center;
  width: 100%;
}

.credit span {
  color: var(--gs-muted);
}

.topbar-nav {
    display: flex;
    gap: 4px;
}
.nav-link {
    font-size: 13px;
    color: var(--gs-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 7px;
    transition: all 0.15s;
}

.nav-link:hover { color: var(--gs-green); }
.nav-link.active { color: var(--gs-green); background: #1e3a14; }