/* ===== MeepleMeet Theme – Header, Navigation, Spieleliste, Dropdown-Filter ===== */
:root{
  --bg:#f6f8fb;--bg-elev:#fff;--fg:#0f172a;--fg-muted:#475569;
  --brand:#2f5af3;--brand-weak:#e8eeff;
  --border:#e6e8ee;--shadow:0 2px 8px rgba(15,23,42,.08);
  --chip-bg:#eef2f7;--chip-fg:#334155;
  --red:#a61b1b;--red-bg:#f2d6d6;
  --amber:#8b5e00;--amber-bg:#f7ebc8;
  --blue:#0b63c9;--blue-bg:#d7e8ff;
  --radius:16px;--focus:0 0 0 3px rgba(47,90,243,.25);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;
  --thumb:96px;--thumb-col:110px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14.5px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:var(--space-5) var(--space-4)}
.page-head h1{margin:0 0 var(--space-4) 0;font-size:1.7rem}

/* Topbar */
.topbar{position:sticky;top:0;z-index:50;background:var(--bg-elev);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.topbar-inner{max-width:1100px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;gap:1rem}
.brand .logo{height:28px;display:block}
.mainnav{display:flex;gap:1rem;align-items:center;margin-left:.25rem;flex:1}
.navicon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid transparent}
.navicon .ico{width:22px;height:22px;display:block}
.navicon:hover{background:var(--brand-weak);border-color:var(--brand-weak)}
.navicon.active{background:var(--brand-weak);border-color:#cdd9ff}
.rightnav{display:flex;align-items:center;gap:.5rem}
.userbox{display:flex;align-items:center;gap:.5rem;background:var(--bg-elev);padding:.25rem .6rem;border-radius:999px;border:1px solid var(--border)}
.userbox .avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.userbox .hi{color:var(--fg);font-weight:600}
.burger{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg-elev);cursor:pointer;font-size:18px;line-height:1}
.burger:hover{background:#f2f4ff;border-color:#cfd7ff}
.burger-menu{position:absolute;right:1rem;top:58px;background:var(--bg-elev);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:.35rem;display:none;min-width:180px}
.burger-menu.open{display:block}
.burger-menu a{display:block;padding:.55rem .7rem;border-radius:8px;color:var(--fg)}
.burger-menu a:hover{background:var(--brand-weak)}

/* Cards / Inputs / Buttons */
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4)}
input[type="text"],input[type="search"],select{height:40px;padding:0 var(--space-3);border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--fg)}
input:focus,select:focus{box-shadow:var(--focus);border-color:var(--brand)}
.form-row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.btn{border:none;border-radius:10px;background:var(--brand);color:#fff;padding:.55rem .9rem;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(.96)}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.ghost:hover{background:var(--brand-weak)}

/* Icon-Filterbar + Dropdowns */
.filters-iconbar{display:flex;gap:.5rem;align-items:center}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg-elev);cursor:pointer}
.iconbtn:hover{background:#f2f4ff;border-color:#cfd7ff}
.dropdown{position:absolute;z-index:40;margin-top:44px;background:var(--bg-elev);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:.5rem .5rem;display:none;min-width:240px}
.dropdown.open{display:block}
.dd-row{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem;border-radius:8px;cursor:pointer}
.dd-row:hover{background:#f6f7ff}
.dd-row input[type="radio"]{accent-color:#3157f3}

/* Spieleliste */
ul.game-cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4)}
.game-card{display:flex;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.game-card .img-box{flex:0 0 var(--thumb-col);display:flex;align-items:center;justify-content:center;background:#f5f7fb}
.game-card .img-box img{width:var(--thumb);height:var(--thumb);object-fit:cover;border-radius:10px;display:block}
.game-card .info-box{flex:1;padding:var(--space-4)}
.game-card h3{margin:0 0 .3rem 0;font-size:1.25rem}
.game-card .meta{color:var(--fg-muted);margin:.15rem 0 .6rem 0}
.btn-row{display:flex;gap:.55rem;flex-wrap:wrap;margin:.35rem 0 .15rem 0}
.flag-btn{border:1px solid var(--border);background:#f3f4f7;color:var(--fg);padding:.38rem .65rem;border-radius:12px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.flag-btn[data-flag="want"]{background:var(--red-bg);color:var(--red);border-color:#e9bcbc}
.flag-btn[data-flag="explain"]{background:var(--amber-bg);color:var(--amber);border-color:#e9d9a9}
.flag-btn[data-flag="bring"]{background:var(--blue-bg);color:var(--blue);border-color:#b9d5ff}

/* Details / Chips */
details.game-details{margin-top:.65rem;border-top:1px solid var(--border);padding-top:.65rem}
details.game-details summary{cursor:pointer;font-weight:700;color:var(--fg-muted);list-style:none}
details.game-details[open] summary{color:var(--fg)}
details.game-details summary::-webkit-details-marker{display:none}
details.game-details summary::after{content:"▾";margin-left:.5rem;opacity:.7}
.detail-content{padding-top:.25rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.35rem 0 .6rem 0}
.chip--want{background:var(--red-bg);color:var(--red);border-color:#e9bcbc}
.chip--explain{background:var(--amber-bg);color:var(--amber);border-color:#e9d9a9}
.chip--bring{background:var(--blue-bg);color:var(--blue);border-color:#b9d5ff}
.detail-content .btn.ghost { margin-top: .75rem; }

/* BGG-Ergebnisse */
.bgg-item{display:flex;align-items:center;gap:.8rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem;box-shadow:var(--shadow)}
.bgg-item img{width:56px;height:56px;object-fit:cover;border-radius:.5rem;display:block}

/* Helpers */
.text-muted{color:var(--fg-muted)}
.mt-2{margin-top:.5rem}
/* =======================================
   FLASH MESSAGES
   ======================================= */
.flash {
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  animation: flashFadeIn 0.3s ease-out;
}

.flash--info {
  background-color: #e7f1ff;
  border-color: #b6d4fe;
  color: #084298;
}

.flash--success {
  background-color: #d1e7dd;
  border-color: #badbcc;
  color: #0f5132;
}

.flash--error {
  background-color: #f8d7da;
  border-color: #f5c2c7;
  color: #842029;
}

@keyframes flashFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* optionaler Auto-Hide (deaktivierbar) */
.flash.fadeout {
  animation: flashHide 0.3s ease-in forwards;
}

@keyframes flashHide {
  to { opacity: 0; height: 0; margin: 0; padding: 0; }
}
/* === Admin-Dashboard – Karten & Action-Buttons (responsive) === */
.adm-dash.container { max-width: 1000px; margin: 0 auto; }
.adm-dash__title { margin: 0 0 1rem; }

/* Kennzahlen-Kacheln */
.adm-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.adm-card {
  background: #fff;
  border: 1px solid #eef0f5;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.adm-card__label { color: #60697b; font-size: .95rem; margin-bottom: 6px; }
.adm-card__value { font-size: 1.8rem; font-weight: 700; }

/* Aktionsleiste – Buttons umbrechen & auf Handy 100% Breite */
.adm-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 12px;
}
.adm-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 12rem;   /* einheitliche Breite auf Desktop */
  border-radius: 10px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 960px){
  .adm-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .adm-cards { grid-template-columns: 1fr; }
  .adm-actions .btn { width: 100%; min-width: 0; } /* Buttons untereinander */
}

/* =======================================
   Auth-Switch (Anmelden / Registrieren)
   ======================================= */

.auth-switch {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: nowrap;              /* NICHT umbrechen */
}

.auth-switch__tab {
  flex: 1 1 0;                    /* beide gleich breit, teilen sich die Zeile */
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #315efb;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;            /* Text selbst nicht umbrechen */
  background: #fff;
  color: #315efb;
  text-decoration: none;
}

/* aktiver Reiter */
.auth-switch__tab.is-active {
  background: #315efb;
  color: #fff;
}

/* --- Optimierung für sehr schmale Smartphones --- */
@media (max-width: 480px) {
  .auth-switch {
    gap: 6px;
  }

  .auth-switch__tab {
    padding: 8px 6px;             /* etwas schmaler */
    font-size: 0.9rem;            /* Schrift minimal kleiner */
  }

  /* optional: Icons im Header etwas dichter setzen */
  .mainnav .navicon {
    margin: 0 4px;
  }
}