/*
Theme Name: FamFit
Theme URI: https://famfit.goehler.dk
Author: You
Author URI: https://famfit.goelher.dk
Description: Minimal shell theme for the FamFit webapp (SPA on the front page).
Version: 0.1.2
License: Unlicensed
Text Domain: famfit
*/

:root{
  --ff-bg: #0b0d10;
  --ff-panel: #12161b;
  --ff-elev: #161b22;
  --ff-text: #e6edf3;
  --ff-text-dim: #9eb0c0;
  --ff-primary: #3b82f6;
  --ff-primary-press: #2563eb;
  --ff-accent: #22c55e;
  --ff-danger: #ef4444;
  --ff-border: #1f2937;
  --ff-radius: 16px;
  --ff-gap: 16px;
  --ff-shadow: 0 6px 24px rgba(0,0,0,.25);
}

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *:before, *:after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--ff-bg);
  color: var(--ff-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
}

/* Layout */
.ff-wrap {
  max-width: 980px;
  padding: 24px 16px;
  margin: 0 auto;
}
.ff-header {
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ff-brand { font-weight: 700; letter-spacing: .2px; font-size: 20px; }
.ff-header .ff-actions { display:flex; gap: 8px; }

/* Panels / cards */
.ff-card {
  background: var(--ff-panel);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow);
}
.ff-card.pad { padding: 16px; }
.ff-grid { display:grid; gap: var(--ff-gap); }
@media (min-width: 768px){
  .ff-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .ff-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* Buttons */
.ff-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--ff-elev);
  color: var(--ff-text);
  transition: transform .06s ease, background .15s ease, border-color .15s;
}
.ff-btn:hover { transform: translateY(-1px); }
.ff-btn:active { transform: translateY(0); }
.ff-btn.primary { background: var(--ff-primary); color: #fff; }
.ff-btn.primary:active { background: var(--ff-primary-press); }
.ff-btn.ghost { background: transparent; border-color: var(--ff-border); }
.ff-btn.success { background: var(--ff-accent); color:#06220f; }
.ff-btn.danger { background: var(--ff-danger); color:#fff; }

/* Inputs */
.ff-input, .ff-select {
  width: 100%;
  background: var(--ff-elev);
  border: 1px solid var(--ff-border);
  color: var(--ff-text);
  border-radius: 12px;
  padding: 10px 12px;
}
.ff-label { display:block; font-size: 12px; color: var(--ff-text-dim); margin-bottom: 6px; }

/* Utility */
.m0{margin:0} .mt8{margin-top:8px} .mt16{margin-top:16px} .mt24{margin-top:24px}
.mb8{margin-bottom:8px} .mb16{margin-bottom:16px} .mb24{margin-bottom:24px}
.center{display:flex;align-items:center;justify-content:center}
.row{display:flex;gap:8px;flex-wrap:wrap}
.dim{color:var(--ff-text-dim)}
.right{margin-left:auto}
.sep{height:1px;background:var(--ff-border);margin:16px 0}

/* App placeholder styles */
#famfit-app .placeholder {
  padding: 24px;
  text-align:center;
  color: var(--ff-text-dim);
}


/* FamFit login form styling */
#famfit-loginform {
  display: grid;
  gap: 14px;
}

#famfit-loginform p {
  margin: 0;
}

#famfit-loginform label {
  display: block;
  font-size: 12px;
  color: var(--ff-text-dim);
  margin-bottom: 6px;
}

/* Inputs */
#famfit-loginform input[type="text"],
#famfit-loginform input[type="email"],
#famfit-loginform input[type="password"] {
  width: 100%;
  background: var(--ff-elev);
  border: 1px solid var(--ff-border);
  color: var(--ff-text);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#famfit-loginform input::placeholder { color: #91a3b6; opacity: .6; }

#famfit-loginform input:focus {
  border-color: var(--ff-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* Remember row */
#famfit-loginform .login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--ff-text-dim);
  font-size: 13px;
}
#famfit-loginform .login-remember input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--ff-primary);
  border-radius: 4px;
}

/* Submit button */
#famfit-loginform #wp-submit {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  background: var(--ff-primary);
  color: #fff;
  width: 100%;
  transition: transform .06s ease, background .15s ease;
}
#famfit-loginform #wp-submit:hover { transform: translateY(-1px); }
#famfit-loginform #wp-submit:active { transform: translateY(0); background: var(--ff-primary-press); }

/* Lost password link */
.famfit-login-meta {
  display: flex; justify-content: center;
  margin-top: 8px; font-size: 13px;
}
.famfit-login-meta a { color: var(--ff-text-dim); text-decoration: none; }
.famfit-login-meta a:hover { color: var(--ff-text); text-decoration: underline; }

/* Error notice compatibility (if redirected back with errors) */
.famfit-login-notice {
  background: #201317;
  border: 1px solid #55232d;
  color: #ffb4c0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 8px;
}