/* Most-App – lokales Stylesheet (grünes Theme analog mannbestellungen, keine CDN-Abhängigkeit) */
:root {
  --green-900:#14532d; --green-800:#166534; --green-700:#15803d; --green-600:#16a34a;
  --bg:#f3f5f0; --surface:#ffffff; --text:#1f2933; --muted:#6b7280; --border:#e5e7eb;
  --danger:#b91c1c; --danger-bg:#fef2f2; --danger-border:#fecaca;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; background:var(--bg); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column;
}

/* ---------- Navbar ---------- */
.navbar { background:var(--green-800); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.navbar-inner { max-width:1240px; margin:0 auto; padding:.5rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.15rem; white-space:nowrap; }
.brand img { height:38px; width:auto; background:#fff; border-radius:7px; padding:3px; }
.nav-links { display:flex; flex-wrap:wrap; gap:.2rem; flex:1 1 auto; }
.nav-links a, .nav-links .nav-static {
  color:#e6f2e7; text-decoration:none; padding:.45rem .7rem; border-radius:7px;
  font-size:.95rem; display:inline-flex; align-items:center; min-height:40px;
}
.nav-links a:hover { background:var(--green-700); color:#fff; }
.nav-links a.active { background:var(--green-700); color:#fff; font-weight:600; }
.nav-links .nav-static { color:#a9d3ac; }
.navbar form { margin:0; }
.logout-btn { background:var(--green-700); color:#fff; border:none; padding:.5rem .95rem; border-radius:7px; cursor:pointer; font-size:.9rem; min-height:40px; }
.logout-btn:hover { background:var(--green-600); }

/* ---------- Inhalt ---------- */
main { flex:1; width:100%; max-width:1240px; margin:0 auto; padding:1.6rem 1rem 2.5rem; }
main h2 { font-size:1.55rem; margin:0 0 1.1rem; color:var(--green-900); }
main h3 { font-size:1.15rem; margin:1.6rem 0 .6rem; color:var(--text); border-bottom:2px solid var(--border); padding-bottom:.3rem; }
main p { margin:.5rem 0; }
main a { color:var(--green-700); text-decoration:none; }
main a:hover { color:var(--green-900); text-decoration:underline; }

/* Sub-Navigation (z. B. Grunddaten-Reiter) */
main > nav { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; }
main > nav a { background:var(--surface); border:1px solid var(--border); padding:.4rem .8rem; border-radius:999px; font-size:.9rem; }
main > nav a:hover { background:#eef2ec; text-decoration:none; }

/* ---------- Tabellen als Karten ---------- */
main table { width:100%; border-collapse:collapse; background:var(--surface); border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); margin:1rem 0; }
main th { background:#eaf0e8; text-align:left; padding:.7rem .85rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:#4b5563; }
main td { padding:.7rem .85rem; border-top:1px solid var(--border); vertical-align:top; }
main tr.error td, main tr.error { background:var(--danger-bg); }
/* verschachtelte Tabellen schlicht (Preiszeiträume, Dubletten-Treffer) */
main td table { box-shadow:none; margin:.2rem 0; background:transparent; }
main td table th, main td table td { background:transparent; padding:.25rem .5rem; font-size:.85rem; text-transform:none; letter-spacing:0; border:none; }

/* ---------- Formulare ---------- */
main form { display:flex; flex-wrap:wrap; gap:.55rem; align-items:flex-end; margin:1rem 0; }
main form label { display:flex; flex-direction:column; gap:.25rem; font-size:.88rem; color:#374151; }
input,select,textarea { font:inherit; padding:.55rem .7rem; border:1px solid #cbd5e1; border-radius:9px; background:#fff; min-height:44px; max-width:100%; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--green-600); outline-offset:0; border-color:var(--green-600); }
input[type=checkbox],input[type=radio] { min-height:auto; width:1.15rem; height:1.15rem; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { flex-direction:row; align-items:center; gap:.45rem; }

/* ---------- Buttons ---------- */
button { font:inherit; background:var(--green-600); color:#fff; border:none; padding:.6rem 1.1rem; border-radius:9px; cursor:pointer; min-height:44px; font-weight:500; }
button:hover { background:var(--green-700); }
td button { padding:.4rem .75rem; min-height:38px; font-size:.9rem; }
td form { display:inline-flex; flex-wrap:wrap; margin:0 .25rem .25rem 0; gap:.3rem; }

/* ---------- Status / Hinweise ---------- */
.error { color:var(--danger); font-weight:500; }
.active-price { font-weight:700; color:var(--green-800); }
code { background:#eef2ec; padding:.1rem .35rem; border-radius:5px; font-size:.9em; }

/* ---------- Auth-Karte (Login / 2FA) ---------- */
.auth { max-width:420px; margin:2rem auto; background:var(--surface); padding:1.8rem; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.auth h2 { margin-top:0; }
.auth form { flex-direction:column; align-items:stretch; }
.auth form label { font-size:.95rem; }
.auth button { width:100%; }
.auth img { display:block; margin:.5rem auto; border:1px solid var(--border); border-radius:10px; }

/* ---------- Footer ---------- */
footer { text-align:center; color:var(--muted); font-size:.8rem; padding:1.4rem 1rem; border-top:1px solid var(--border); background:var(--surface); }

@media (max-width:640px) {
  .navbar-inner { padding:.5rem .7rem; }
  main { padding:1.1rem .7rem 2rem; }
  main h2 { font-size:1.3rem; }
  /* breite Tabellen (viele Spalten/verschachtelte Formulare) auf Mobil horizontal scrollbar */
  main > table, .table-scroll { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}