/* ====================================================
   theme.css – Farben/Typo/Nav/Forms/Optik
   ==================================================== */
/* Layout-Entscheidung:
   Unterseiten: inneres Scrollen in .hidden (Viewport-gebunden)
   Startseite: eigener Flow in home.css
*/
/* ====================================================
   theme.css – Inhalt
   01) Variablen (falls vorhanden)
   02) Typo + globale Elemente (p, h1.., a)
   03) Header
   04) Navigation + Dropdown
   05) Main/Aside/Section Optik
   06) Formulare
   07) Tabellen
   08) Footer
   09) Layout (Unterseiten: 100vh + inneres Scrollen)
   10) Utilities / Fixes
   ==================================================== */

/* = 02) Typo + globale Elemente (p, h1.., a) ===== */

p, ol, ul, dl { color: var(--font-color); }

h1, h2, h3, h4{
  text-align: center;
  color: orange;
  background-color: #0084d1;
  margin: .25em 0;
  padding: .2em .4em;
}

a{
  text-decoration: none;
  color: var(--link-color);
}

a:hover, a:focus{
  font-weight: bold;
  background-color: var(--accent1-color);
}

/* Buttons/Text nie umbrechen */
button, .input, input[type="submit"], a.more, a.button, .btn{
  white-space: nowrap;
}

input, select, textarea, button{
  font-size: inherit;
  font-family: inherit;
}

/* =03) Header ===== */

header{
  background-color: var(--accent1-color);
  box-shadow: -0.3em .6em .6em 0 rgba(0, 0, 0, .75);
  height: 90px;
  padding: 0.5em 1em;
  margin: 0 0 1em 0;
  overflow: visible;
}

/* = 04) Navigation + Dropdown =========== */

nav > ul{ margin: 0; padding: 0; }

ul.navleiste{
  display: flex;
  gap: .5rem;
  list-style: none;
  align-items: flex-start;
}

ul.navleiste > li{ position: relative; }

nav ul ul{
  position: absolute;
  left: 0;
  top: calc(100% + .35rem);

  display: none;        /* ? wichtig */
  z-index: 50;
}

nav ul li:hover > ul,
nav ul li:focus-within > ul{
  display: block;       /* ? sichtbar machen */
}

nav a{
  display: block;
  padding: 0.4em;
  text-decoration: none;
  font-weight: bold;
  border: thin solid #0084d1;
  border-radius: 10px;
  color: orange;
  background-color: #0084d1;
  transition: all .25s ease-in;
}

nav li[aria-current] a{
  background-color: firebrick;
  color: orange;
}

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover{
  color: #0084d1;
  background-color: orange;
}

/* ===== Main Optik (nur Nicht-Home) ===== */

main:not(.home-main){
  background-color: #B0B0B0;
  box-shadow: -0.3em .6em .6em 0 rgba(0,0,0,.75);
  padding: 0.5em 1em;
  margin: 0 0 1em 0;
}

main:not(.home-main) > aside{
  background-color: #D0D0D0;
  padding: 0.5em 1em;
}

main:not(.home-main) > section{
  background-color: #E0E0E0;
  padding: 0.5em 1em;
}


/* ===== Top-Level Buttons (Weg 2: Text steht im HTML) ===== */
ul.navleiste > li > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 2.4rem;
  padding: 0 .9rem;

  border-radius: 12px;
}

/* Dropdown auch per Tastatur offen halten (besser als a:focus ~ ul) */
ul.navleiste > li:focus-within > ul{
  font: inherit;
  z-index: 50;
}

/* ===================== A) NAV-DROPDOWN OPTIK ===================== */

/* Dropdown-Panel */
nav ul ul{
  margin-top: .35rem;
  padding: .5rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.25);
  background: #D0D0D0;
}

/* Der Dropdown-Inhalt ist bei dir oft: div.table > table.breite/halbbreit */
nav ul ul .table{
  display: block;               /* statt display:table -> weniger “seltsam” */
  margin: 0;
}

nav ul ul table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

nav ul ul td{
  padding: 0;                   /* wir stylen die Links, nicht die TDs */
  box-shadow: none;             /* kill inset-shadows im Menü */
}

/* Menü-Links im Dropdown */
nav ul ul a{
  display: block;
  padding: .55rem .75rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(to top, gainsboro 0%, white 90%);
  color: #006b6b;               /* teal-ish */
  font-weight: 600;
}

/* Hover/Focus: ruhig, klar */
nav ul ul a:hover,
nav ul ul a:focus{
  background: orange;
  color: #0084d1;
  outline: none;
}

/* Menüeinträge untereinander klar trennen */
nav ul ul tr + tr a{
  margin-top: .35rem;
}

/* Optional: kleine “Pfeil”-Anmutung im Dropdown-Panel */
nav ul ul{
  transform-origin: top left;
}

/* Haupt-Nav-Kacheln oben: optional etwas ruhiger */
nav > ul > li > a{
  border-radius: 12px;
}

/* Kill floats/Altlasten */
ul.navleiste li{ float: none; width: auto; margin: 0; padding: 0; }

/* ===== Aside Menü ===== */
aside{ color: teal; }

aside li{
  box-shadow: -0.3em .6em .6em 0 rgba(0, 0, 0, .75);
  text-align: left;
  background-color: #0084d1;
  color: teal;
  display: block;
  margin: 0.5em 0;
  padding: 0.5em 2em;
  list-style-type: none;
  border-radius: .5em;
}

aside a{ color: teal; text-decoration: none; }

aside a:hover,
aside a:focus{
  color: var(--accent1-color);
  font-weight: bold;
  background: transparent;
}

/* ===== Formulare ===== */
form,
.form2{
  background-color: #0084d1;
  color: orange;
  padding: 10px;
  font-weight: bold;
  border: 1px solid silver;
  border-radius: 20px;
}

form a,
input[type="submit"]{
  font-size: 1.3em;
  margin: 5px 12px;
  padding: 5px 12px;
  font-weight: 200;
  color: teal;
  border: 1px solid silver;
  background-image: linear-gradient(to top, gainsboro 0%, white 90%);
  border-radius: 20px;
}

input, select{ width: 160px; }
#bgmonat { width: 70px; }
#bgjahr  { width: 90px; }

input[readonly]{
  color: orange;
  font-weight: bold;
  background-color: #0084d1;
}

/* Validity */
input:invalid { color: red; }
input:valid   { color: teal; }
input[required]{ background-color: #F08080; }

/* ===== Tabellen-Optik ===== */
th, td{
  padding: 0.2em 0.4em;
  box-shadow: inset 1px 3px 5px -3px rgba(0,0,0,.5);
}

.hidden thead{
  color: #fff;
  background-color: #808080;
}

tbody tr:nth-child(odd) { background-color: #eee; }
tbody tr:nth-child(even){ background-color: #ccc; }
tr:hover { background-color: #FF7777 !important; }

/* Betrag-Farben */
td.zahl.neg{ color: #b00020; font-weight: bold; }
td.zahl.pos{ color: #0a7a0a; font-weight: bold; }
td.zahl.zero{ color: inherit; }

/* ===================== B) BUCHUNGEN: SPALTEN STABIL ===================== */

/* Buchungen-Tabelle: fixed Layout stabilisiert Spalten */
.hidden table.sortierbar{
  table-layout: fixed;
  width: 100%;
}

/* Allgemein: Zellen dürfen nicht ausufern */
.hidden table.sortierbar th,
.hidden table.sortierbar td{
  overflow: hidden;            /* wichtig für fixed layout */
  text-overflow: ellipsis;     /* lange Inhalte sauber abschneiden */
}

/* 1–4: Icon-Spalten sehr schmal */
.hidden table.sortierbar th:nth-child(1),
.hidden table.sortierbar td:nth-child(1),
.hidden table.sortierbar th:nth-child(2),
.hidden table.sortierbar td:nth-child(2),
.hidden table.sortierbar th:nth-child(3),
.hidden table.sortierbar td:nth-child(3),
.hidden table.sortierbar th:nth-child(4),
.hidden table.sortierbar td:nth-child(4){
  width: 2.2rem;
  text-align: center;
  white-space: nowrap;
}

/* 5: Bu_ID */
.hidden table.sortierbar th:nth-child(5),
.hidden table.sortierbar td:nth-child(5){
  width: 5.5rem;
  white-space: nowrap;
}

/* 6: ID */
.hidden table.sortierbar th:nth-child(6),
.hidden table.sortierbar td:nth-child(6){
  width: 5.5rem;
  white-space: nowrap;
}

/* 7: Datum */
.hidden table.sortierbar th:nth-child(7),
.hidden table.sortierbar td:nth-child(7){
  width: 7.2rem;
  white-space: nowrap;
}

/* 10: Betrag */
.hidden table.sortierbar th:nth-child(10),
.hidden table.sortierbar td:nth-child(10){
  width: 7.8rem;
  white-space: nowrap;
}

/* 11: Kategorie (kurz) */
.hidden table.sortierbar th:nth-child(11),
.hidden table.sortierbar td:nth-child(11){
  width: 10rem;
  white-space: nowrap;
}

/* 12: Umbuchung */
.hidden table.sortierbar th:nth-child(12),
.hidden table.sortierbar td:nth-child(12){
  width: 12rem;
  white-space: nowrap;
}

/* 8/9: Empfänger + Verwendung = flexibel, darf umbrechen */
.hidden table.sortierbar th:nth-child(8),
.hidden table.sortierbar td:nth-child(8),
.hidden table.sortierbar th:nth-child(9),
.hidden table.sortierbar td:nth-child(9){
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Ellipsis bei Empfänger/Verwendung deaktivieren, weil wir Umbruch wollen */
.hidden table.sortierbar td:nth-child(8),
.hidden table.sortierbar td:nth-child(9){
  text-overflow: clip;
}

.hidden table.sortierbar th{ text-align: left; }
.hidden table.sortierbar th:nth-child(1),
.hidden table.sortierbar th:nth-child(2),
.hidden table.sortierbar th:nth-child(3),
.hidden table.sortierbar th:nth-child(4){ text-align: center; }
.hidden table.sortierbar th:nth-child(10){ text-align: right; }


/* ===== Footer ===== */
footer#footer{
  background-color: #0084d1;
  color: orange;
  box-shadow: -0.3em .6em .6em 0 rgba(0, 0, 0, .75);
  min-height: 30px;
  text-align: center;
  padding: 0.5em 0.5em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* =========================================================
   09) Layout (Unterseiten: 100vh + inneres Scrollen)
   ========================================================= */

/* App-Rahmen auf Viewport-Höhe begrenzen + zentrieren */
.page{
  height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;

  display: flex;
  flex-direction: column;
}

/* Unterseiten: main mit aside + content nebeneinander */
.page > main:not(.home-main){
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;

  display: flex;
  flex-direction: row;
  overflow: hidden; /* damit NICHT die Seite scrollt */
}

/* Aside Breite */
.page > main:not(.home-main) > aside{
  flex: 0 0 clamp(360px, 24%, 460px);
  min-width: clamp(360px, 24%, 460px);
  max-width: clamp(360px, 24%, 460px);
  min-height: 0;
}

/* Content: Kopf fest, Inhalt scrollt */
.page > main:not(.home-main) > section.app-content{
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page > main:not(.home-main) > section.app-content > .section-head{
  flex: 0 0 auto;
}

.page > main:not(.home-main) > section.app-content > .hidden{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* = 05) Main/Aside/Section Optik =================== */