/* Rebstock-Verwaltung — Bielersee/Winzerhaus-Farbsystem (bielersee-palette.skill) */
:root {
  /* Akzente */
  --color-primary:   #35656B;  /* See */
  --color-secondary: #9A8C73;  /* Sandstein */
  --color-success:   #6E7F4E;  /* Rebgrün */
  --color-warning:   #C89A3C;  /* Herbstgold */
  --color-danger:    #9E4A38;  /* Weinrot */
  --color-info:      #6B9BA0;  /* Seewasser */

  /* Hover (ca. 9 % dunkler) */
  --color-primary-hover: #2C555A;
  --color-success-hover: #5D6B42;
  --color-danger-hover:  #863E2F;

  /* Flächen & Text (hell) */
  --color-bg:      #F5F0E6;
  --color-surface: #FBF8F1;
  --color-text:    #2B2621;
  --color-muted:   #7A7060;
  --color-border:  #E2D9C7;

  /* Text auf farbigen Flächen */
  --on-accent:  #FFFFFF;
  --on-warning: #2B2621;

  /* Akzente als Text-/Randfarbe auf Flächen (kontrastgeprüft ≥ 4.5:1) */
  --color-primary-text: #35656B;
  --color-success-text: #5B6940;
  --color-danger-text:  #9E4A38;
  --color-warning-text: #B38932;

  /* Tabellenzeilen */
  --zeile-hover-bg:    color-mix(in srgb, var(--color-secondary) 7%, var(--color-surface));
  --zeile-dringend-bg: color-mix(in srgb, var(--color-warning) 16%, var(--color-surface));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:      #1E1B17;
    --color-surface: #2B2621;
    --color-text:    #F2ECE0;
    --color-muted:   #A89B84;
    --color-border:  #3A342C;
    --color-primary-text: #539FA8;
    --color-success-text: #93A66E;
    --color-danger-text:  #CC8070;
    --color-warning-text: #C89A3C;
    --zeile-hover-bg:    color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface));
    --zeile-dringend-bg: var(--color-surface);
  }
}

[data-theme="dark"] {
  --color-bg:      #1E1B17;
  --color-surface: #2B2621;
  --color-text:    #F2ECE0;
  --color-muted:   #A89B84;
  --color-border:  #3A342C;
  --color-primary-text: #539FA8;
  --color-success-text: #93A66E;
  --color-danger-text:  #CC8070;
  --color-warning-text: #C89A3C;
  --zeile-hover-bg:    color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface));
  --zeile-dringend-bg: var(--color-surface);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Navigation — primary (See) führt */
header { background: var(--color-primary); color: var(--on-accent); }
nav {
  max-width: 1100px; margin: 0 auto; padding: 0 1rem;
  display: flex; align-items: center; gap: .25rem; flex-wrap: wrap;
}
a.marke {
  font-weight: 700; padding: .8rem .8rem .8rem 0;
  color: var(--on-accent) !important; background: none !important;
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none;
}
.logo-icon { height: 1.15em; width: auto; }
nav a {
  color: color-mix(in srgb, var(--on-accent) 78%, transparent);
  text-decoration: none; padding: .8rem .7rem;
}
nav a:hover, nav a.aktiv { color: var(--on-accent); background: var(--color-primary-hover); }
.logout { margin-left: auto; }
button.link {
  background: none; border: none; cursor: pointer;
  color: color-mix(in srgb, var(--on-accent) 78%, transparent);
  font: inherit; padding: .8rem .5rem;
}
button.link:hover { color: var(--on-accent); }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.anzahl { color: var(--color-muted); font-weight: 400; font-size: 1.1rem; }

/* Dashboard-Karten */
.karten { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.karte {
  flex: 1 1 180px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 1rem 1.2rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .2rem;
}
.karte:hover { border-color: var(--color-primary-text); }
.karte .zahl { font-size: 2rem; font-weight: 700; color: var(--color-primary-text); }
.karte.warnung .zahl { color: var(--color-warning-text); }
.karte .beschriftung { color: var(--color-muted); font-size: .9rem; }

/* Tabellen */
table {
  width: 100%; border-collapse: collapse; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden;
}
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--color-border); }
th {
  background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-surface));
  font-weight: 600; font-size: .85rem;
}
tr:last-child td { border-bottom: none; }
tr.dringend td { background: var(--zeile-dringend-bg); }
tr.dringend td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
tr:hover td { background: var(--zeile-hover-bg); }
td a { color: var(--color-primary-text); }
.leer { color: var(--color-muted); font-style: italic; }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: color-mix(in srgb, var(--color-secondary) 22%, var(--color-surface));
  border-radius: 99px; padding: .1rem .6rem;
  font-size: .82rem; text-decoration: none; color: var(--color-text);
  margin: .1rem .15rem .1rem 0;
}
.chip.gruen {
  background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));
  color: var(--color-success-text);
}
.chip.grau {
  background: color-mix(in srgb, var(--color-muted) 14%, var(--color-surface));
  color: var(--color-muted);
}
.chip-x {
  background: none; border: none; cursor: pointer; color: inherit;
  font-size: .9rem; padding: 0 .1rem; opacity: .6;
}
.chip-x:hover { opacity: 1; }

/* Formulare */
.suche { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; }
.suche input[type="search"] { flex: 1 1 240px; }
input, select, textarea {
  font: inherit; padding: .45rem .6rem; border: 1px solid var(--color-border);
  border-radius: 6px; background: var(--color-surface); color: var(--color-text); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary-text) 45%, transparent);
  border-color: var(--color-primary-text);
}
input[type="checkbox"] { width: auto; accent-color: var(--color-primary); }
label { display: flex; flex-direction: column; gap: .25rem; flex: 1; font-size: .88rem; }
label.schmal { flex: 0 1 160px; }
label.checkbox { flex-direction: row; align-items: center; gap: .5rem; }
label small { color: var(--color-muted); }
.zeile { display: flex; gap: .8rem; margin-bottom: .8rem; flex-wrap: wrap; }
fieldset {
  border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface);
  padding: 1rem; margin: 0 0 1rem;
}
legend { font-weight: 600; padding: 0 .4rem; }
.formular { max-width: 760px; }

/* Buttons — primary (See) als Haupt-Aktionsfarbe, Sandstein für Sekundäres */
button, .knopf {
  font: inherit; cursor: pointer; text-decoration: none; display: inline-block;
  background: var(--color-primary); color: var(--on-accent); border: none; border-radius: 6px;
  padding: .5rem 1rem; width: auto;
}
button:hover, .knopf:hover { background: var(--color-primary-hover); }
.knopf.sekundaer, button.sekundaer {
  background: var(--color-surface); color: var(--color-primary-text);
  border: 1px solid var(--color-primary-text);
}
.knopf.sekundaer:hover { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }
button.gefahr {
  background: var(--color-surface); color: var(--color-danger-text);
  border: 1px solid var(--color-danger-text); margin-top: 1rem;
}
button.gefahr:hover { background: var(--color-danger); color: var(--on-accent); }
button.klein { padding: .25rem .7rem; font-size: .84rem; }
.aktionen { display: flex; gap: 1rem; align-items: center; margin-top: .5rem; }
.aktionen a { color: var(--color-muted); }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Inline-Bezug-Formular */
.inline-form { display: inline-flex; gap: .4rem; align-items: center; }
.inline-form input[type="date"] { width: 145px; }
.inline-form .menge { width: 58px; }
.inline-form button {
  background: var(--color-success);
}
.inline-form button:hover { background: var(--color-success-hover); }

/* Meldungen */
.fehler {
  background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface));
  color: var(--color-danger-text);
  border: 1px solid color-mix(in srgb, var(--color-danger-text) 40%, transparent);
  border-radius: 6px; padding: .6rem .9rem;
}
.hinweis { color: var(--color-muted); font-size: .9rem; }

/* Login — Seetöne */
.login-seite {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  background: linear-gradient(160deg, var(--color-primary) 0%, #24464B 100%);
}
.login-box {
  background: var(--color-surface); border-radius: 12px; padding: 2rem 2.2rem;
  width: 100%; max-width: 360px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.login-logo { text-align: center; margin-bottom: .6rem; }
.login-icon { height: 44px; width: auto; color: var(--color-primary-text); }
.login-box h1 { font-size: 1.2rem; text-align: center; margin: 0 0 1.2rem; }
.login-box label { margin-bottom: .8rem; }
.login-box button { width: 100%; margin-top: .4rem; }

@media (max-width: 640px) {
  .zeile { flex-direction: column; }
  nav { font-size: .9rem; }
}