/* public/shared/styles.css */

/* === Fonts (self-hosted, aus dem Original-Tutorial übernommen) === */

@font-face {
  font-family: "Amatic SC";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/amatic-sc/amatic-sc-v13-latin-regular.woff2") format("woff2"),
       url("./fonts/amatic-sc/amatic-sc-v13-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/oswald/oswald-v31-latin-300.woff2") format("woff2"),
       url("./fonts/oswald/oswald-v31-latin-300.woff") format("woff");
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/oswald/oswald-v31-latin-regular.woff2") format("woff2"),
       url("./fonts/oswald/oswald-v31-latin-regular.woff") format("woff");
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/oswald/oswald-v31-latin-700.woff2") format("woff2"),
       url("./fonts/oswald/oswald-v31-latin-700.woff") format("woff");
}

/* === Design-Tokens === */

:root {
  --color-einnahme: #28a745;
  --color-einnahme-tint: #d4edda;
  --color-einnahme-border: #c3e6cb;
  --color-ausgabe: #dc3545;
  --color-ausgabe-tint: #f8d7da;
  --color-ausgabe-border: #f5c6cb;
  --color-kredit: #ffc107;
  --color-kredit-text: #856404;
  --color-kredit-tint: #fff3cd;
  --color-kredit-border: #ffeeba;
  --color-primary: #007bff;
  --color-topbar: #343a40;
  --color-bg: #ffffff;
  --color-box-bg: #e9ecef;
  --color-input-bg: #ffffff;
  --color-text: #212529;
  --color-text-muted: #495057;
  --color-border: #ced4da;
}

/* === Allgemeines === */

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

body, input, textarea, button, select, option {
  font-family: "Oswald", Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: .05rem;
}

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; }

::placeholder { color: #6c757d; }

.page {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* === Kopfzeile === */

header.topbar {
  background: var(--color-topbar);
  line-height: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 2rem;
}

header.topbar h1 {
  font-size: 5rem;
  text-transform: uppercase;
  color: #fff;
  font-family: "Amatic SC", cursive;
  line-height: inherit;
}

header.topbar #logout-btn {
  position: absolute;
  right: 2rem;
  max-width: none;
  margin: 0;
  line-height: 2.5rem;
  font-size: 1.3rem;
  padding: .5rem 1.5rem;
  background: transparent;
  border: .1rem solid rgba(255, 255, 255, .5);
  border-radius: 1.5rem;
  color: #fff;
}

header.topbar #logout-btn:hover { background: rgba(255, 255, 255, .12); }

/* === Login === */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-box {
  background: var(--color-box-bg);
  border-radius: 1.5rem;
  padding: 3rem;
  width: 34rem;
}

.login-box h1 {
  font-family: "Amatic SC", cursive;
  text-transform: uppercase;
  font-size: 4rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.login-box label {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--color-text-muted);
  font-size: 1.3rem;
}

.login-box input {
  display: block;
  width: 100%;
  margin-top: .5rem;
  padding: .6rem 1.5rem;
  border: .1rem solid var(--color-border);
  border-radius: 1.5rem;
  background: var(--color-input-bg);
  color: var(--color-text-muted);
  font-size: 1.5rem;
}

.login-box input:focus, .entry-form-box input:focus, .summary-box select:focus {
  outline: 0;
  border-color: #80bdff;
  box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.login-box .form-actions { justify-content: center; }

.login-box .login-links {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.login-box .login-links button {
  max-width: none;
  margin: 0;
}

/* === Buttons === */

button {
  cursor: pointer;
  max-width: 24rem;
  line-height: 2.5rem;
  font-size: 1.4rem;
  background: var(--color-primary);
  border: .1rem solid var(--color-primary);
  padding: .5rem 2rem;
  color: #fff;
  border-radius: 1.5rem;
  margin: 1rem 0;
  transition: filter .15s ease-in-out;
}

button:hover { filter: brightness(1.08); }

button#resend-btn, button#back-btn {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
  padding: .5rem .5rem;
}

button.delete-btn, button.entfernen-button, button.bearbeiten-button {
  max-width: none;
  margin: 0;
}

button#cancel-edit-btn {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.error {
  color: var(--color-ausgabe);
  min-height: 1.2em;
  font-size: 1.3rem;
}

/* === Eingabeformular === */

.entry-form-box {
  background: var(--color-box-bg);
  border-radius: 1.5rem;
  padding: 3rem;
  margin-bottom: 2rem;
}

.entry-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.entry-form-box h2 { font-size: 2.2rem; }
.entry-form-header h2 { margin: 0; white-space: nowrap; }

#entry-search {
  width: 22rem;
  max-width: 100%;
  padding: .5rem 1.2rem;
  border: .1rem solid var(--color-border);
  border-radius: 1.5rem;
  background: var(--color-input-bg);
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .entry-form-header { flex-direction: column; align-items: stretch; }
  #entry-search { width: 100%; }
}

.form-row {
  display: flex;
  align-items: flex-start;
}

.form-row > * { flex-grow: 1; }

[class$="-eingabe-gruppe"] {
  display: flex;
  margin: 1rem 0;
  width: 100%;
}

[class$="-eingabe-gruppe"] > label,
[class$="-eingabe-gruppe"] > input {
  line-height: 2.5rem;
  border: .1rem solid var(--color-border);
}

[class$="-eingabe-gruppe"] > label {
  padding: .5rem 1.8rem .5rem 2rem;
  background: var(--color-box-bg);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

[class$="-eingabe-gruppe"] > input {
  padding: .375rem .75rem;
  flex-grow: 1;
  min-width: 0;
  color: var(--color-text-muted);
  background: var(--color-input-bg);
}

[class$="-eingabe-gruppe"] > :first-child {
  border-right: none;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

[class$="-eingabe-gruppe"] > :last-child {
  border-left: none;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

/* Titel + Typ (Einnahme / Ausgabe / Kredit) */

.titel-typ-eingabe-gruppe > input[type="text"] {
  border-right: none;
  border-left: none;
}

.titel-typ-eingabe-gruppe label.typ-label {
  width: 11rem;
  border-left: none;
}

/* nur die letzte Typ-Option (Kredit) behält ihren rechten Rand, damit die
   Pille dort sauber abschließt — die mittleren Optionen sind rundum nahtlos */
.titel-typ-eingabe-gruppe label.typ-label:not(:last-child) {
  border-right: none;
}

.titel-typ-eingabe-gruppe label.typ-label[for="einnahme"] {
  background: var(--color-einnahme-tint);
  color: var(--color-einnahme);
  border-color: var(--color-einnahme-border);
}

.titel-typ-eingabe-gruppe label.typ-label[for="ausgabe"] {
  background: var(--color-ausgabe-tint);
  color: var(--color-ausgabe);
  border-color: var(--color-ausgabe-border);
}

.titel-typ-eingabe-gruppe label.typ-label[for="kredit"] {
  background: var(--color-kredit-tint);
  color: var(--color-kredit-text);
  border-color: var(--color-kredit-border);
}

.titel-typ-eingabe-gruppe > input[type="radio"] { display: none; }

.titel-typ-eingabe-gruppe > input[type="radio"]:checked + label {
  color: #fff;
  z-index: 1;
}

.titel-typ-eingabe-gruppe > input[value="einnahme"]:checked + label {
  background: var(--color-einnahme);
  box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5);
}

.titel-typ-eingabe-gruppe > input[value="ausgabe"]:checked + label {
  background: var(--color-ausgabe);
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5);
}

.titel-typ-eingabe-gruppe > input[value="kredit"]:checked + label {
  background: var(--color-kredit);
  color: var(--color-kredit-text);
  box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5);
}

/* Betrag + Datum */

.betrag-datum-eingabe-gruppe > input:nth-of-type(1) {
  border-right: none;
  border-left: none;
}

.betrag-datum-eingabe-gruppe > label:nth-of-type(2) {
  border-right: none;
  border-left: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: .5rem;
}

/* === Layout / Monatslisten === */

.layout {
  display: grid;
  grid-template-columns: 1fr 30rem;
  gap: 2rem;
  align-items: start;
}

.monatsliste {
  margin: 0 0 2rem;
  border-bottom: .1rem solid var(--color-border);
  padding-bottom: 1rem;
}

.monatsliste > h2 {
  display: flex;
  align-items: center;
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.monatsliste > h2 > .monat-jahr { flex-grow: 1; }

.monatsliste > h2 > .monatsbilanz {
  flex-grow: 0;
  font-size: 1.8rem;
  padding: .5rem 1rem;
  color: #fff;
  border-radius: 1.2rem;
}

.monatsliste > h2 > .monatsbilanz.positive { background: var(--color-einnahme); }
.monatsliste > h2 > .monatsbilanz.negative { background: var(--color-ausgabe); }

.monatsliste > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.monatsliste > ul > li {
  display: flex;
  line-height: 2.5rem;
  margin: 1.2rem 0;
}

.monatsliste > ul > li > .datum {
  width: 12rem;
  padding: .5rem 1.8rem .5rem 2rem;
  border: .1rem solid var(--color-border);
  border-right: none;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
  flex-grow: 0;
  background: var(--color-box-bg);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.monatsliste > ul > li > .titel {
  padding: .5rem 2rem;
  border-top: .1rem solid var(--color-border);
  border-bottom: .1rem solid var(--color-border);
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monatsliste > ul > li > .betrag {
  padding: .5rem 2rem;
  border-top: .1rem solid var(--color-border);
  border-bottom: .1rem solid var(--color-border);
  flex-grow: 0;
  font-variant-numeric: tabular-nums;
}

.monatsliste > ul > li > .bearbeiten-button {
  color: var(--color-text-muted);
  background: var(--color-box-bg);
  padding: .5rem 1.2rem;
  border-top: .1rem solid var(--color-border);
  border-bottom: .1rem solid var(--color-border);
  flex-grow: 0;
  display: flex;
  align-items: center;
}

.monatsliste > ul > li > .entfernen-button {
  color: var(--color-text-muted);
  background: var(--color-box-bg);
  padding: .5rem 1.5rem;
  border: .1rem solid var(--color-border);
  border-left: none;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  flex-grow: 0;
  display: flex;
  align-items: center;
}

.monatsliste > ul > li > .bearbeiten-button svg,
.monatsliste > ul > li > .entfernen-button svg { width: 1.3rem; height: 1.3rem; pointer-events: none; }

.monatsliste > ul > li > .bearbeiten-button:hover { color: var(--color-primary); }
.monatsliste > ul > li > .entfernen-button:hover { color: var(--color-ausgabe); }

.monatsliste > ul > li.ausgabe > .titel,
.monatsliste > ul > li.ausgabe > .betrag {
  background: var(--color-ausgabe-tint);
  color: var(--color-ausgabe);
  border-color: var(--color-ausgabe-border);
}

.monatsliste > ul > li.einnahme > .titel,
.monatsliste > ul > li.einnahme > .betrag {
  background: var(--color-einnahme-tint);
  color: var(--color-einnahme);
  border-color: var(--color-einnahme-border);
}

.monatsliste > ul > li.kredit > .titel,
.monatsliste > ul > li.kredit > .betrag {
  background: var(--color-kredit-tint);
  color: var(--color-kredit-text);
  border-color: var(--color-kredit-border);
}

/* === Sidebar / Gesamtbilanz / Chart === */

.sidebar { display: flex; flex-direction: column; gap: 2rem; }

.summary-box, .chart-box {
  background: var(--color-box-bg);
  border-radius: 1.5rem;
  padding: 3rem;
}

.summary-box h2 { font-size: 2.2rem; margin-bottom: 1.5rem; }

.summary-box .zeitraum-gruppe { margin-bottom: 1.5rem; }
.summary-box .zeitraum-gruppe label {
  display: block;
  margin-bottom: .5rem;
  color: var(--color-text-muted);
  font-size: 1.3rem;
}

.summary-box select {
  width: 100%;
  padding: .5rem 1rem;
  border: .1rem solid var(--color-border);
  border-radius: 1.5rem;
  background: var(--color-input-bg);
  color: var(--color-text-muted);
}

.gesamtbilanz-zeile {
  display: flex;
  line-height: 2.5rem;
}

.gesamtbilanz-zeile > span:nth-of-type(1) { flex-grow: 1; color: var(--color-text-muted); }
.gesamtbilanz-zeile > span:nth-of-type(2) { flex-grow: 0; padding: .2rem .75rem; font-variant-numeric: tabular-nums; }

.gesamtbilanz-zeile.kredite > span:nth-of-type(2) { border-bottom: .1rem solid var(--color-border); }

.gesamtbilanz-zeile.bilanz { margin-top: 1rem; }
.gesamtbilanz-zeile.bilanz > span:nth-of-type(1) { font-weight: 400; }
.gesamtbilanz-zeile.bilanz > span:nth-of-type(2) { color: #fff; border-radius: 1.2rem; }
.gesamtbilanz-zeile.bilanz > span:nth-of-type(2).positive { background: var(--color-einnahme); }
.gesamtbilanz-zeile.bilanz > span:nth-of-type(2).negative { background: var(--color-ausgabe); }

.gesamtbilanz-zeile.real { margin-top: .3rem; font-size: 1.3rem; }
.gesamtbilanz-zeile.real > span:nth-of-type(1) { font-style: italic; }
.gesamtbilanz-zeile.real > span:nth-of-type(2) { color: #fff; border-radius: 1.2rem; }
.gesamtbilanz-zeile.real > span:nth-of-type(2).positive { background: var(--color-einnahme); opacity: .75; }
.gesamtbilanz-zeile.real > span:nth-of-type(2).negative { background: var(--color-ausgabe); opacity: .75; }

.summary-box #print-btn { width: 100%; max-width: none; text-align: center; }

.chart-box { text-align: center; }
.chart-box #detail-toggle { width: 100%; max-width: none; }

@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  [class$="-eingabe-gruppe"] { margin: .5rem 0; }
}