:root {
  --melo-orange: #e7461c;
  --melo-orange-dark: #c93613;
  --melo-gray: #9c9c9c;
  --melo-gray-dark: #666666;
  --melo-ink: #262626;
  --melo-muted: #6b7280;
  --melo-line: #dedede;
  --melo-bg: #f5f5f4;
  --melo-card: #ffffff;
  --melo-soft: #f0f0ef;
  --melo-danger: #b42318;
  --melo-success: #2f7d32;
  --melo-radius: 14px;
  --melo-shadow: 0 8px 24px rgba(0,0,0,.055);
}
* { box-sizing: border-box; }
html { background: var(--melo-bg); }
body {
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  color: var(--melo-ink) !important;
  background: var(--melo-bg) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 20px 48px !important;
  line-height: 1.5;
}
body > *:not(.melo-header):not(script):not(style) {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
body > .wrap, body > .container, body > .page, body > main { max-width: 1180px !important; }
.melo-header {
  max-width: none !important;
  width: calc(100% + 40px);
  margin: 0 -20px 30px !important;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 4px solid var(--melo-orange);
  box-shadow: 0 3px 16px rgba(0,0,0,.07);
}
.melo-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.melo-header__brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none !important;
  color: var(--melo-ink) !important;
  min-width: max-content;
}
.melo-header__brand img { height: 66px; width: auto; display: block; }
.melo-header__title { font-weight: 800; font-size: 1.28rem; line-height: 1.05; letter-spacing: -.02em; }
.melo-header__title small { display:block; margin-top:5px; font-size:.72rem; color:var(--melo-gray-dark); font-weight:650; letter-spacing:.01em; }
.melo-header__nav { margin-left:auto; display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.melo-header__nav a {
  color: var(--melo-gray-dark) !important;
  text-decoration: none !important;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 9px;
}
.melo-header__nav a:hover { background: var(--melo-soft); color: var(--melo-orange-dark) !important; }
h1,h2,h3 { color: var(--melo-ink) !important; letter-spacing: -.02em; }
h1 { font-size: clamp(1.7rem,3vw,2.25rem); margin-top: 0; }
h2 { margin-top: 1.45em; }
a { color: var(--melo-orange-dark) !important; }
a:hover { color: var(--melo-orange) !important; }
.card,.area,.box,.panel,.section,.form-section,.info-card,.stat,.summary-card {
  background: var(--melo-card) !important;
  border: 1px solid var(--melo-line) !important;
  border-radius: var(--melo-radius) !important;
  box-shadow: var(--melo-shadow);
}
.card,.area,.box,.panel,.section,.form-section,.info-card { padding: 20px !important; }
.button, button, input[type="submit"], input[type="button"], .btn, a.btn, a.button {
  appearance: none;
  border: 0 !important;
  border-radius: 9px !important;
  background: var(--melo-orange) !important;
  color: #fff !important;
  font-weight: 750 !important;
  padding: 9px 14px !important;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
}
.button:hover,button:hover,input[type="submit"]:hover,input[type="button"]:hover,.btn:hover,a.button:hover,a.btn:hover {
  background: var(--melo-orange-dark) !important;
  color:#fff !important;
}
.secondary,.button.secondary,.btn-secondary { background: var(--melo-gray) !important; color:#fff !important; }
.danger,.button.danger,.btn-danger { background: var(--melo-danger) !important; color:#fff !important; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: #fff !important;
  border: 1px solid #cfcfcf !important;
  border-radius: 8px !important;
  color: var(--melo-ink) !important;
  padding: 9px 10px !important;
}
input:focus,select:focus,textarea:focus {
  outline: 3px solid rgba(231,70,28,.15) !important;
  border-color: var(--melo-orange) !important;
}
label { color: #333; }
table { background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--melo-shadow); border-collapse:collapse !important; }
th { background: #ececea !important; color:#333 !important; font-weight:800 !important; }
th,td { border-bottom:1px solid #e4e4e4 !important; }
tbody tr:hover { background:#fff8f5; }
.tabs a,.pill,.badge,.status {
  border-radius: 999px !important;
}
.muted,.hint,.small { color: var(--melo-muted) !important; }
.success,.ok { color: var(--melo-success) !important; }
.error,.alert-danger { color: var(--melo-danger) !important; background:#fff1ef !important; border:1px solid #f3c8c0 !important; border-radius:10px; }
.notice,.message,.alert,.info { border-left:4px solid var(--melo-orange) !important; background:#fff !important; }
hr { border:0; border-top:1px solid var(--melo-line); }
/* Statusfarben nur dezent, damit MELO-Orange primäre Aktionsfarbe bleibt */
.late,.bad { color:var(--melo-danger) !important; }
/* Buchungs- und Inventar-Kacheln */
.grid { gap:16px !important; }
.area { border-top:4px solid var(--melo-orange) !important; }
/* Alte blaue Inline-Links/Buttons überschreiben */
[style*="background:#1f5ca8"],[style*="background: #1f5ca8"],[style*="background:#195a99"],[style*="background: #195a99"] { background: var(--melo-orange) !important; }
/* Logo/Print */
@media (max-width: 760px) {
  body { padding-left:12px !important; padding-right:12px !important; }
  .melo-header { width:calc(100% + 24px); margin-left:-12px !important; margin-right:-12px !important; padding:10px 12px; }
  .melo-header__inner { align-items:flex-start; gap:12px; }
  .melo-header__brand img { height:54px; }
  .melo-header__title { font-size:1.05rem; }
  .melo-header__nav { gap:2px; }
  .melo-header__nav a { padding:6px 7px; font-size:.88rem; }
  table { font-size:.9rem; }
}
@media print {
  .melo-header { display:none !important; }
  body { background:#fff !important; padding:0 !important; }
  .card,.area,.box,.panel,table { box-shadow:none !important; }
}

/* MELO Layout-Fix: Seitenkopf + Aktionsleiste */
.top {
  display: block !important;
  margin-bottom: 24px !important;
}
.top > div:first-child {
  width: 100%;
  min-width: 0;
}
.top > div:first-child h1 {
  margin-bottom: 6px !important;
}
.top > div:first-child .muted {
  margin-top: 0 !important;
}
.top > div:last-child {
  width: 100%;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
}
.top > div:last-child .button,
.top > div:last-child .btn,
.top > div:last-child button,
.top > div:last-child a.button {
  margin: 0 !important;
  white-space: nowrap !important;
}

/* etwas ruhigere Nebenaktionen in der Kopfleiste */
.top > div:last-child a[href="/"] {
  background: var(--melo-gray) !important;
}
.top > div:last-child a[href="/logout.php"] {
  background: var(--melo-gray-dark) !important;
}
.top > div:last-child a[href="/"]:hover,
.top > div:last-child a[href="/logout.php"]:hover {
  background: #555 !important;
}

@media (max-width: 620px) {
  .top > div:last-child {
    gap: 7px !important;
  }
  .top > div:last-child .button,
  .top > div:last-child .btn,
  .top > div:last-child button,
  .top > div:last-child a.button {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* MELO Tabellen-Fix: breite Verwaltungslisten auf Desktop vollständig nutzbar */
@media (min-width: 1100px) {
  body > *:not(.melo-header):not(script):not(style) {
    max-width: 1480px !important;
  }
  body > .wrap,
  body > .container,
  body > .page,
  body > main {
    max-width: 1480px !important;
  }
  .melo-header__inner {
    max-width: 1480px !important;
  }
}

.table-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  scrollbar-gutter: stable;
}

.table-wrap > table {
  width: 100% !important;
  min-width: 1180px;
  margin: 0 !important;
}

/* Auf schmaleren Geräten darf die Tabelle horizontal gescrollt werden,
   statt Spalten abzuschneiden oder unlesbar zusammenzustauchen. */
@media (max-width: 1099px) {
  .table-wrap > table {
    min-width: 1180px;
  }
}