:root {
  --chilldex-ink: #171717;
  --chilldex-orange: #ff9800;
  --chilldex-orange-dark: #df7200;
  --chilldex-paper: #fffaf3;
  --chilldex-line: #eadfce;
}

* {
  box-sizing: border-box;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  isolation: isolate;
  background: var(--chilldex-paper);
  color: var(--chilldex-ink);
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: '';
}

body::before {
  opacity: .7;
  background:
    radial-gradient(ellipse 78% 28% at -8% 12%, transparent 64%, rgba(255, 152, 0, .22) 65%, rgba(255, 152, 0, .22) 66%, transparent 67%),
    radial-gradient(ellipse 68% 26% at 108% 78%, transparent 63%, rgba(23, 23, 23, .12) 64%, rgba(23, 23, 23, .12) 65%, transparent 66%),
    repeating-linear-gradient(155deg, transparent 0 92px, rgba(23, 23, 23, .045) 93px 95px, transparent 96px 178px);
}

body::after {
  opacity: .55;
  background:
    radial-gradient(ellipse 54% 20% at 108% 8%, transparent 60%, rgba(255, 152, 0, .18) 61%, rgba(255, 152, 0, .18) 62%, transparent 63%),
    radial-gradient(ellipse 58% 22% at -10% 91%, transparent 60%, rgba(23, 23, 23, .10) 61%, rgba(23, 23, 23, .10) 62%, transparent 63%);
}

header {
  position: relative;
  z-index: 2;
  height: 76px;
  padding: 0 2rem;
  background: rgba(255, 253, 249, .94);
  border-bottom: 3px solid var(--chilldex-orange);
  box-shadow: 0 5px 20px rgba(23, 23, 23, .08);
  color: var(--chilldex-ink);
}

header .brand-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: min(240px, 48vw);
  height: 68px;
}

header .brand-lockup img {
  display: block;
  width: 100%;
  height: 62px;
  object-fit: contain;
  object-position: left center;
}

header .header-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
}

header .language-switcher {
  position: relative;
  z-index: 4;
}

/* Unsichtbare Hover-Brücke zwischen Button und ausklappendem Menü. */
header .language-switcher::after,
header .profile::after {
  position: absolute;
  top: 100%;
  right: -.3rem;
  left: -.3rem;
  z-index: 1;
  height: .65rem;
  content: '';
}

header .language-trigger {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid rgba(223, 114, 0, .55);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  font-size: 1.25rem;
  line-height: 1;
}

header .language-trigger:hover,
header .language-trigger:focus-visible {
  background: rgba(255, 152, 0, .16);
  border-color: var(--chilldex-orange-dark);
}

header .language-menu {
  display: none;
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 145px;
  padding: .35rem;
  border: 1px solid rgba(223, 114, 0, .35);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 23, 23, .16);
  z-index: 5;
}

header .language-switcher:hover .language-menu,
header .language-switcher:focus-within .language-menu {
  display: grid;
  gap: .15rem;
}

header .language-menu button {
  width: 100%;
  padding: .55rem .65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--chilldex-ink);
  text-align: left;
  cursor: pointer;
}

header .language-menu button:hover,
header .language-menu button:focus-visible {
  background: #fff3df;
}

header a {
  color: var(--chilldex-ink);
}

header .profile button {
  color: var(--chilldex-ink);
}

header .profile {
  position: relative;
  z-index: 3;
}

header .profile-trigger {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .25rem .45rem;
  border: 1px solid rgba(223, 114, 0, .55);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--chilldex-ink);
  box-shadow: 0 3px 10px rgba(23, 23, 23, .08);
}

header .profile-trigger:hover,
header .profile-trigger:focus-visible {
  background: rgba(255, 152, 0, .16);
  border-color: var(--chilldex-orange-dark);
}

header .profile-trigger #profileName {
  padding-right: .35rem;
  font-weight: 700;
}

header .avatar {
  background: var(--chilldex-orange);
  border: 2px solid var(--chilldex-ink);
  color: var(--chilldex-ink);
}

header .profile .menu {
  top: calc(100% + .35rem);
  z-index: 5;
}

header .profile:hover .menu,
header .profile:focus-within .menu {
  display: block;
}

main {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  padding-top: 2.4rem;
}

.card {
  border-color: rgba(223, 114, 0, .25);
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 14px 40px rgba(23, 23, 23, .08);
  backdrop-filter: blur(4px);
}

.card h1,
.card h2 {
  color: var(--chilldex-ink);
}

.nav a,
.stock-dropdown > button,
.sales-dropdown > button {
  background: linear-gradient(135deg, var(--chilldex-ink), #343434);
  border: 1px solid rgba(255, 152, 0, .65);
  box-shadow: 0 8px 18px rgba(23, 23, 23, .12);
}

.nav a:hover,
.nav a:focus,
.stock-dropdown > button:hover,
.sales-dropdown > button:hover {
  background: linear-gradient(135deg, var(--chilldex-orange-dark), var(--chilldex-orange));
}

button:not(.menu button):not(.profile button) {
  background: var(--chilldex-orange);
  color: var(--chilldex-ink);
  font-weight: 700;
}

button:not(.menu button):not(.profile button):hover {
  background: var(--chilldex-orange-dark);
}

button.secondary {
  background: var(--chilldex-ink);
  color: #fff;
}

input:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(255, 152, 0, .38);
  outline-offset: 2px;
}

table {
  border: 1px solid var(--chilldex-line);
  border-radius: 9px;
  overflow: hidden;
}

.export-table {
  position: relative;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--chilldex-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .72);
}

.export-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  min-height: 4.25rem;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--chilldex-line);
  background: rgba(255, 250, 243, .76);
}

.export-file-button {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  padding: .3rem;
  border: 1px solid rgba(95, 101, 112, .4);
  border-radius: 9px;
  background: #fff;
  color: var(--chilldex-ink);
  box-shadow: 0 4px 10px rgba(23, 23, 23, .12);
}

.export-file-button:hover,
.export-file-button:focus-visible {
  border-color: var(--chilldex-orange-dark);
  background: #fffaf0;
}

.export-file-button:disabled {
  cursor: wait;
  opacity: .58;
}

.export-file-button svg {
  display: block;
  width: 2.3rem;
  height: 2.3rem;
}

.export-file-text {
  border-color: rgba(139, 144, 153, .55);
}

.export-file-text:hover,
.export-file-text:focus-visible {
  border-color: #6c727d;
  background: #f3f4f6;
}

.export-file-csv {
  border-color: rgba(98, 109, 120, .55);
}

.export-file-csv:hover,
.export-file-csv:focus-visible {
  border-color: #4d5863;
  background: #eef1f3;
}

.excel-export {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: .3rem;
  border: 1px solid rgba(24, 92, 55, .35);
  border-radius: 9px;
  background: #fff;
  color: #185c37;
  box-shadow: 0 4px 10px rgba(23, 23, 23, .12);
}

.excel-export:hover,
.excel-export:focus-visible {
  border-color: #185c37;
  background: #eaf6ef;
}

.export-table .table-scroll {
  overflow-x: auto;
}

.export-table table {
  margin-top: 0;
  border: 0;
  border-radius: 0;
}

.section-heading {
  margin-top: 1.5rem;
}

th {
  background: #fff3df;
}

th,
td {
  border-bottom-color: var(--chilldex-line);
}

.sales-product-panel {
  border-color: rgba(223, 114, 0, .34);
  background: rgba(255, 252, 246, .92);
}

.sales-tabs a[aria-current='page'] {
  border-color: rgba(223, 114, 0, .45);
  color: var(--chilldex-ink);
}

.back,
.stock-tabs a,
.sales-tabs a {
  color: var(--chilldex-orange-dark);
}

header .language-menu button {
  background: transparent;
  color: var(--chilldex-ink);
  font-weight: 400;
}

/* Dezente Retro-Oberfläche: klare Konturen, Papierflächen und harte Schatten. */
body {
  background-color: #f6f1e7;
  background-image:
    linear-gradient(rgba(23, 23, 23, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 23, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}

header {
  background: rgba(255, 252, 244, .97);
  border-bottom: 2px solid var(--chilldex-ink);
  box-shadow: 0 4px 0 var(--chilldex-orange), 0 10px 22px rgba(23, 23, 23, .08);
}

main {
  padding-bottom: 3rem;
}

.card {
  border: 2px solid var(--chilldex-ink);
  border-radius: 8px;
  background: rgba(255, 253, 247, .95);
  box-shadow: 6px 6px 0 rgba(23, 23, 23, .14);
}

.card h1,
.card h2 {
  letter-spacing: -.025em;
}

.nav > a,
body .stock-dropdown > button,
body .sales-dropdown > button {
  border: 2px solid var(--chilldex-ink);
  border-radius: 5px;
  background: #fff8db;
  box-shadow: 4px 4px 0 var(--chilldex-ink);
  color: var(--chilldex-ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.nav > a:hover,
.nav > a:focus,
body .stock-dropdown > button:hover,
body .stock-dropdown > button:focus,
body .sales-dropdown > button:hover,
body .sales-dropdown > button:focus {
  background: #ffd36a;
  color: var(--chilldex-ink);
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--chilldex-ink);
}

.nav > a:nth-child(2n),
.nav .sales-dropdown > button {
  background: #fff;
}

.nav > a:nth-child(2n):hover,
.nav > a:nth-child(2n):focus,
.nav .sales-dropdown > button:hover,
.nav .sales-dropdown > button:focus {
  background: #ffd36a;
}

body button:not(.menu button):not(.profile button) {
  border: 2px solid var(--chilldex-ink);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--chilldex-ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

body button:not(.menu button):not(.profile button):hover,
body button:not(.menu button):not(.profile button):focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--chilldex-ink);
}

body button.secondary {
  background: var(--chilldex-ink);
  border-color: var(--chilldex-ink);
  box-shadow: 3px 3px 0 var(--chilldex-orange);
}

input,
select {
  border: 2px solid var(--chilldex-ink);
  border-radius: 4px;
  background: #fffef9;
  box-shadow: 2px 2px 0 rgba(23, 23, 23, .13);
}

input:focus,
select:focus {
  border-color: var(--chilldex-orange-dark);
  box-shadow: 3px 3px 0 var(--chilldex-orange);
}

table {
  border: 2px solid var(--chilldex-ink);
  border-radius: 5px;
  background: #fffef9;
}

th {
  background: #ffe58d;
  color: var(--chilldex-ink);
}

th,
td {
  border-bottom-color: #d8cdbb;
}

.export-table,
body .sales-product-panel,
body .sales-chart-panel,
body .inventory-chart-panel {
  border: 2px solid var(--chilldex-ink);
  border-radius: 7px;
  box-shadow: 4px 4px 0 rgba(23, 23, 23, .12);
}

body .export-table {
  width: 100%;
}

body .inventory-chart-panel {
  width: 100%;
  box-sizing: border-box;
}

body .stock-list-panel {
  border: 2px solid var(--chilldex-ink);
  border-radius: 7px;
  background: #fffef9;
  box-shadow: 4px 4px 0 rgba(23, 23, 23, .12);
}

body .stock-tabs,
body .inventory-chart-tabs {
  gap: .35rem;
  padding: .65rem .8rem 0;
  border-bottom: 2px solid var(--chilldex-ink);
  background: #fff3c7;
}

body .inventory-chart-tabs {
  border-top: 2px solid var(--chilldex-ink);
}

body .stock-tabs a,
body .inventory-chart-panel .inventory-chart-tabs button.inventory-chart-tab {
  border: 2px solid var(--chilldex-ink);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  box-shadow: none;
  background: #fffdf7;
  color: var(--chilldex-ink);
}

body .stock-tabs a[aria-current='page'],
body .inventory-chart-panel .inventory-chart-tabs button.inventory-chart-tab[aria-selected='true'] {
  position: relative;
  margin-bottom: -2px;
  background: #ffe58d;
  border-color: var(--chilldex-ink);
  color: var(--chilldex-ink);
}

body .stock-tabs a:hover,
body .stock-tabs a:focus,
body .inventory-chart-panel .inventory-chart-tabs button.inventory-chart-tab:hover,
body .inventory-chart-panel .inventory-chart-tabs button.inventory-chart-tab:focus {
  background: #ffe58d;
  border-color: var(--chilldex-ink);
  color: var(--chilldex-ink);
}

body .stock-list-panel .export-table {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body .stock-list-panel > .error {
  margin: 0;
  padding: .55rem .8rem 0;
}

body .stock-list-panel > .pages {
  margin: 0;
  padding: .8rem;
  border-top: 2px solid #d8cdbb;
}

.export-table-actions {
  background: #fff3c7;
  border-bottom-color: #d8cdbb;
}

body .excel-export {
  border: 2px solid var(--chilldex-ink);
  border-radius: 5px;
  background: #fff;
  color: #185c37;
  box-shadow: 3px 3px 0 var(--chilldex-ink);
}

body .sales-filter-field select,
body .inventory-chart-period select {
  border: 2px solid var(--chilldex-ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(23, 23, 23, .13);
}

body .sales-product-empty,
body .inventory-chart-placeholder,
body .inventory-chart-empty,
body .sales-chart-empty {
  border: 2px dashed #9f917e;
  border-radius: 5px;
  background: #fffaf0;
}

body .sales-tab-button {
  border: 2px solid var(--chilldex-ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 rgba(23, 23, 23, .18);
  color: var(--chilldex-ink);
}

body .sales-tab-button[aria-current='page'] {
  background: var(--chilldex-orange);
  border-color: var(--chilldex-ink);
  color: var(--chilldex-ink);
}

body .sales-tab-button:hover,
body .sales-tab-button:focus {
  background: #ffd36a;
  border-color: var(--chilldex-ink);
  color: var(--chilldex-ink);
}

body .stock-options,
body .sales-options,
header .language-menu,
header .profile .menu {
  border: 2px solid var(--chilldex-ink);
  border-radius: 5px;
  box-shadow: 4px 4px 0 rgba(23, 23, 23, .18);
  background: #fffdf7;
}

body .nav .stock-options a,
body .nav .sales-options a,
header .language-menu button,
header .profile .menu button {
  border-radius: 3px;
}

body .nav .stock-options a:hover,
body .nav .stock-options a:focus,
body .nav .sales-options a:hover,
body .nav .sales-options a:focus,
header .language-menu button:hover,
header .language-menu button:focus-visible,
header .profile .menu button:hover,
header .profile .menu button:focus-visible {
  background: #ffe58d;
}

header .language-menu button,
header .profile .menu button {
  background: transparent;
  color: var(--chilldex-ink);
  box-shadow: none;
}

header .language-trigger,
header .profile-trigger {
  border: 2px solid var(--chilldex-ink);
  border-radius: 5px;
  background: #fffdf7;
  color: var(--chilldex-ink);
  box-shadow: 3px 3px 0 var(--chilldex-ink);
}

header .language-trigger:hover,
header .language-trigger:focus-visible,
header .profile-trigger:hover,
header .profile-trigger:focus-visible {
  background: #ffd36a;
  border-color: var(--chilldex-ink);
}

header .avatar {
  border: 2px solid var(--chilldex-ink);
  background: var(--chilldex-orange);
}

/* Kleine Kategorien-Icons für die Startseite und die drei Bereichs-Dropdowns. */
body .nav > a .category-icon,
body .stock-dropdown > button .category-icon,
body .sales-dropdown > button .category-icon {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  margin-bottom: .65rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: rgba(255, 255, 255, .52);
}

body .category-icon svg {
  display: block;
  width: 1.72rem;
  height: 1.72rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body .nav > a .category-icon {
  color: var(--chilldex-orange-dark);
}

body .nav > a:hover .category-icon,
body .nav > a:focus .category-icon,
body .stock-dropdown > button:hover .category-icon,
body .sales-dropdown > button:hover .category-icon {
  color: var(--chilldex-ink);
  background: rgba(255, 255, 255, .7);
}

/* Das Muster bleibt als Hintergrund erkennbar, drängt sich aber nicht mehr auf. */
body {
  background-image:
    linear-gradient(rgba(23, 23, 23, .016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 23, .016) 1px, transparent 1px);
  background-size: 36px 36px;
}

body::before {
  opacity: .25;
  background:
    radial-gradient(ellipse 78% 28% at -8% 12%, transparent 64%, rgba(255, 152, 0, .11) 65%, rgba(255, 152, 0, .11) 66%, transparent 67%),
    radial-gradient(ellipse 68% 26% at 108% 78%, transparent 63%, rgba(23, 23, 23, .055) 64%, rgba(23, 23, 23, .055) 65%, transparent 66%),
    repeating-linear-gradient(155deg, transparent 0 112px, rgba(23, 23, 23, .018) 113px 114px, transparent 115px 220px);
}

body::after {
  opacity: .2;
  background:
    radial-gradient(ellipse 54% 20% at 108% 8%, transparent 60%, rgba(255, 152, 0, .08) 61%, rgba(255, 152, 0, .08) 62%, transparent 63%),
    radial-gradient(ellipse 58% 22% at -10% 91%, transparent 60%, rgba(23, 23, 23, .045) 61%, rgba(23, 23, 23, .045) 62%, transparent 63%);
}

/* Kompakte Bereichsnavigation direkt zwischen Logo und Sprache/Profil. */
header {
  --section-accent: var(--chilldex-orange-dark);
  height: 68px;
  gap: .7rem;
  padding: 0 1.25rem;
  border-bottom: 3px solid #d9cebc;
}

header[data-section] {
  border-bottom-color: var(--section-accent);
  box-shadow: 0 8px 18px rgba(23, 23, 23, .08);
}

header[data-section='sales'] {
  --section-accent: #3f789c;
}

header[data-section='returns'] {
  --section-accent: #a9433d;
}

header[data-section='masterdata'] {
  --section-accent: #4d6fa9;
}

header[data-section='prices'] {
  --section-accent: #9a7414;
}

header .brand-lockup {
  flex: 0 0 auto;
  width: min(205px, 28vw);
  height: 60px;
}

header .brand-lockup img {
  height: 54px;
}

header .section-header-tabs {
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: flex-end;
  justify-content: center;
  gap: .32rem;
  min-width: 0;
  margin: 0 .35rem -3px;
  padding-top: .45rem;
}

header .section-header-tabs[hidden] {
  display: none;
}

header .section-header-tab {
  --section-accent: #9a6a2e;
  --section-soft: #fff8e9;
  --section-hover: #ffedc3;
  display: flex;
  flex: 1 1 105px;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: .35rem .55rem;
  border: 1px solid color-mix(in srgb, var(--section-accent) 42%, #fff);
  border-radius: 6px 6px 0 0;
  background: var(--section-soft);
  color: var(--chilldex-ink);
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: flex-grow .15s ease, background .12s ease, border-color .12s ease;
}

header .section-header-tab[data-section='stock'] {
  --section-accent: #c76600;
  --section-soft: #fff0d2;
  --section-hover: #ffdfa4;
}

header .section-header-tab[data-section='sales'] {
  --section-accent: #3f789c;
  --section-soft: #eaf4fa;
  --section-hover: #d4eaf6;
}

header .section-header-tab[data-section='returns'] {
  --section-accent: #a9433d;
  --section-soft: #fff0ed;
  --section-hover: #ffddd8;
}

header .section-header-tab[data-section='masterdata'] {
  --section-accent: #4d6fa9;
  --section-soft: #eef2ff;
  --section-hover: #dfe6ff;
}

header .section-header-tab[data-section='prices'] {
  --section-accent: #9a7414;
  --section-soft: #fff6d5;
  --section-hover: #ffeb9f;
}

header .section-header-tab .category-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: 0;
  border: 1px solid var(--chilldex-ink);
  border-radius: 4px;
  background: #fffdf7;
}

header .section-header-tab .category-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

header .section-header-tab:hover,
header .section-header-tab:focus-visible {
  background: var(--section-hover);
  border-color: var(--section-accent);
  color: var(--chilldex-ink);
}

header .section-header-tab[aria-current='page'] {
  position: relative;
  z-index: 3;
  flex-grow: 1.22;
  min-height: 3.1rem;
  border: 3px solid var(--section-accent);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: var(--section-accent);
  color: #fffaf3;
  box-shadow: none;
}

header .section-header-tab[aria-current='page']::after {
  position: absolute;
  right: -3px;
  bottom: -5px;
  left: -3px;
  height: 6px;
  background: var(--section-accent);
  content: '';
}

header .section-header-tab[aria-current='page']:hover,
header .section-header-tab[aria-current='page']:focus-visible {
  background: var(--section-accent);
  color: #fffaf3;
}

/* Die aktive Lasche und der Inhaltsrahmen verwenden dieselbe Bereichsfarbe. */
main[data-section] {
  --section-accent: #c76600;
  margin-top: 0;
  margin-bottom: 2rem;
  padding: 1rem;
  border: 3px solid var(--section-accent);
  border-radius: 0 0 10px 10px;
  background: rgba(255, 253, 247, .56);
}

main[data-section='sales'] {
  --section-accent: #3f789c;
}

main[data-section='returns'] {
  --section-accent: #a9433d;
}

main[data-section='masterdata'] {
  --section-accent: #4d6fa9;
}

main[data-section='prices'] {
  --section-accent: #9a7414;
}

main[data-section] #app > .card {
  padding: .85rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

header .header-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

body .loading-line[hidden] {
  display: none;
}

/* Ruhige Tabellenoberfläche für Stock, Verkauf und Retouren. */
body #app .export-table,
body #app .stock-list-panel {
  border: 1px solid #d8dee6;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px #18283c08;
}

body #app .stock-list-panel .export-table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body #app .export-table-actions {
  min-height: 3.5rem;
  padding: .5rem .75rem;
  background: #fafbfc;
  border-bottom: 1px solid #d8dee6;
}

body #app .export-table-actions button {
  border: 1px solid #d8dee6;
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
  transform: none;
}

body #app .export-table-actions button:hover {
  background: #edf2f7;
  border-color: #aab9c9;
}

body #app table {
  border: 1px solid #d8dee6;
  border-radius: 0;
  border-collapse: collapse;
  background: #fff;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

body #app .export-table table {
  border: 0;
}

body #app table th,
body #app table td {
  padding: .65rem .8rem;
  border-bottom: 1px solid #e1e6ed;
  border-right: 1px solid #e1e6ed;
  vertical-align: middle;
  line-height: 1.45;
}

body #app table tr > :last-child {
  border-right: 0;
}

body #app table thead th {
  background: #f1f4f7;
  color: #344256;
  font-weight: 600;
  border-bottom-color: #cbd4df;
}

body #app table thead th button {
  display: inline-block;
  padding: .3rem .35rem;
  margin: -.3rem -.35rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
}

body #app table thead th button:hover {
  background: #dfe8f1;
  color: #193e65;
}

body #app table thead th button:focus-visible,
body #app .export-table-actions button:focus-visible {
  outline: 2px solid #608bb5;
  outline-offset: 2px;
  box-shadow: none;
  transform: none;
}

body #app table th[aria-sort='ascending'],
body #app table th[aria-sort='descending'] {
  background: #e5edf5;
  color: #244d76;
}

body #app table tbody tr > * {
  background: #fff;
}

body #app table tbody tr:nth-child(even) > * {
  background: #fafbfd;
}

body #app table tbody th {
  font-weight: 600;
  color: #344256;
}

body #app table tbody tr:hover > * {
  background: #eef4fa;
}

body #app table tbody tr > td:hover {
  background: #e2edf8;
  box-shadow: inset 0 0 0 1px #acc3da;
}

body #app .stock-list-panel > .pages {
  border-top: 1px solid #d8dee6;
}

body .sales-product-empty {
  padding: .7rem 1rem;
  font-size: .88rem;
}

@media (max-width: 900px) {
  body .inventory-chart-panel {
    width: 100%;
  }

  header .section-header-tab span {
    display: block;
    overflow: hidden;
    font-size: .66rem;
    text-overflow: ellipsis;
  }

  header .section-header-tab {
    flex: 1 1 0;
    gap: .18rem;
    padding: .25rem .18rem;
  }

  header .section-header-tab[aria-current='page'] {
    flex-grow: 1;
  }
}

@media (max-width: 640px) {
  header {
    height: auto;
    min-height: 68px;
    flex-wrap: wrap;
    padding: .35rem .75rem .55rem;
  }

  header .brand-lockup {
    width: 170px;
  }

  header .section-header-tabs {
    order: 3;
    flex-basis: 100%;
    margin: .25rem 0 0;
  }
}
/* The stock date changes only the table; the chart keeps its own period. */
body #app .stock-list-panel { overflow: visible; }
.stock-list-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: #fff3c7; border-radius: 8px 8px 0 0; }
body .stock-list-heading .stock-tabs { grid-column: 1; grid-row: 1; align-items: end; background: transparent; }
.stock-date-control { display: contents; }
.stock-date-actions { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .5rem .8rem; border-bottom: 2px solid var(--chilldex-ink); }
.stock-date-picker { position: relative; }
.stock-date-picker summary { cursor: pointer; list-style: none; padding: .65rem 1rem; border: 2px solid #222; border-radius: 6px; background: white; font-weight: 700; }
.stock-date-picker summary::-webkit-details-marker { display: none; }
.stock-date-picker summary:focus-visible { outline: 3px solid #ed9e30; outline-offset: 3px; }
.stock-calendar { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 340px; max-width: calc(100vw - 64px); box-sizing: border-box; padding: 1rem; background: white; border: 2px solid #222; border-radius: 8px; box-shadow: 4px 4px 0 #222; }
.stock-calendar-heading { display: grid; grid-template-columns: 30px 1fr 80px 30px; gap: .25rem; align-items: center; margin: .75rem 0; }
.stock-calendar-heading select { width: 100%; min-width: 0; padding: .3rem; font-size: .85rem; }
.stock-calendar-heading button { padding: .25rem; }
.stock-calendar-week,.stock-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.stock-calendar-week { font-size: .72rem; color: #667085; margin-bottom: .4rem; }
body #app .stock-calendar-days button { min-width: 0; padding: .4rem 0; border: 1px solid transparent; box-shadow: none; background: #f4f4f4; color: #222; font-size: .85rem; transform: none; }
body #app .stock-calendar-days button[aria-pressed=true] { background: #ffdf88; border-color: #222; }
body #app .stock-calendar-days button:hover:not(:disabled),body #app .stock-calendar-days button:focus-visible { background: #ffe8aa; border-color: #222; }
.stock-calendar-days button:disabled { opacity: .3; cursor: default; }
.stock-calendar [data-current] { width: 100%; }
.stock-calendar p { font-size: .8rem; line-height: 1.4; }
.stock-date-status { grid-column: 1 / -1; grid-row: 2; text-align: right; font-size: .82rem; margin: 0; padding: .35rem .8rem; background: #fff; }
@media (max-width: 900px) {
  .stock-list-heading { grid-template-columns: minmax(0, 1fr); }
  .stock-date-actions { grid-column: 1; grid-row: 2; border-bottom: 0; }
  .stock-date-status { grid-row: 3; }
}
body #app .stock-refresh.needs-update { background: #ffc75b; border-color: #222; }
@media (max-width: 480px) { .stock-calendar { right: auto; left: 0; } .stock-date-actions { justify-content: flex-start; } }