/* MHD-Tracker - Metzgerei Wiersch. Mobile-first, Gruen/Beige. */

:root {
    --gruen: #4A7C3F;
    --gruen-dunkel: #3A6231;
    --gruen-hell: #6B9C5F;
    --beige: #D9C7A7;
    --beige-hell: #F5EFE3;
    --weiss: #FDFBF7;
    --text: #2E2A24;
    --text-schwach: #6E655A;
    --rand: #E3D9C6;

    --rot: #C0392B;
    --rot-bg: #FBEAE7;
    --orange: #D97528;
    --orange-bg: #FDF0E4;
    --gelb: #B8901A;
    --gelb-bg: #FCF6E3;
    --ok: #4A7C3F;
    --ok-bg: #EDF3EA;

    --radius: 10px;
    --schatten: 0 1px 3px rgba(46, 42, 36, .12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--beige-hell);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------- Kopf + Navi */

header {
    background: var(--gruen);
    color: #fff;
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

header .titel { font-weight: 700; font-size: 1.05rem; }
header .titel small { display: block; font-weight: 400; font-size: .75rem; opacity: .8; }
header a { color: #fff; text-decoration: none; }
header .wer { font-size: .8rem; text-align: right; opacity: .9; white-space: nowrap; }

nav {
    background: var(--gruen-dunkel);
    display: flex;
    overflow-x: auto;
    position: sticky;
    top: 56px;
    z-index: 49;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
nav::-webkit-scrollbar { display: none; }

nav a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    padding: .7rem .95rem;
    white-space: nowrap;
    font-size: .9rem;
    border-bottom: 3px solid transparent;
}
nav a.aktiv { color: #fff; font-weight: 600; border-bottom-color: var(--beige); }

main { padding: 1rem; max-width: 1280px; margin: 0 auto; }

h1 { font-size: 1.35rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .7rem; }

/* ---------------------------------------------------------- Bausteine */

.karte {
    background: var(--weiss);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--schatten);
}

.kacheln {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
    margin-bottom: 1rem;
}

.kachel {
    background: var(--weiss);
    border: 1px solid var(--rand);
    border-left: 5px solid var(--rand);
    border-radius: var(--radius);
    padding: .8rem;
    text-decoration: none;
    color: inherit;
    display: block;
}
.kachel .zahl { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kachel .label { font-size: .8rem; color: var(--text-schwach); }
.kachel .zusatz { font-size: .75rem; color: var(--text-schwach); margin-top: .2rem; }

.kachel.expired { border-left-color: var(--rot); background: var(--rot-bg); }
.kachel.expired .zahl { color: var(--rot); }
.kachel.critical { border-left-color: var(--orange); background: var(--orange-bg); }
.kachel.critical .zahl { color: var(--orange); }
.kachel.warning { border-left-color: var(--gelb); background: var(--gelb-bg); }
.kachel.warning .zahl { color: var(--gelb); }
.kachel.ok { border-left-color: var(--ok); background: var(--ok-bg); }
.kachel.ok .zahl { color: var(--ok); }

.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge.expired { background: var(--rot-bg); color: var(--rot); }
.badge.critical { background: var(--orange-bg); color: var(--orange); }
.badge.warning { background: var(--gelb-bg); color: var(--gelb); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.unknown { background: #eee; color: #666; }

/* ---------------------------------------------------------- Formulare */

label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }

input[type=text], input[type=number], input[type=date], input[type=password],
input[type=email], input[type=file], select, textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: #fff;
    font-size: 16px; /* verhindert Zoom auf iOS */
    font-family: inherit;
    color: var(--text);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--gruen-hell);
    outline-offset: -1px;
}

.feld { margin-bottom: .9rem; }
.zeile { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.zeile > * { flex: 1 1 160px; }

button, .knopf {
    display: inline-block;
    background: var(--gruen);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: .8rem 1.1rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
button:active, .knopf:active { background: var(--gruen-dunkel); }
button.gross { width: 100%; padding: 1rem; font-size: 1.1rem; }
button.hell, .knopf.hell { background: var(--beige); color: var(--text); }
button.rot, .knopf.rot { background: var(--rot); }
button.klein, .knopf.klein { padding: .45rem .7rem; font-size: .85rem; }
button:disabled { opacity: .5; cursor: not-allowed; }

.quick { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.quick button {
    background: var(--beige-hell);
    color: var(--gruen-dunkel);
    border: 1px solid var(--beige);
    padding: .45rem .65rem;
    font-size: .85rem;
}

/* ---------------------------------------------------------- Tabellen */

.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--weiss); }
th, td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid var(--rand); }
th {
    background: var(--beige-hell);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-schwach);
    white-space: nowrap;
    position: sticky;
    top: 0;
}
td.zahl, th.zahl { text-align: center; }
tr.expired td:first-child { box-shadow: inset 3px 0 var(--rot); }
tr.critical td:first-child { box-shadow: inset 3px 0 var(--orange); }
tr.warning td:first-child { box-shadow: inset 3px 0 var(--gelb); }

.leer { padding: 2rem 1rem; text-align: center; color: var(--text-schwach); }

/* ---------------------------------------------------------- Autocomplete */

.suche-wrap { position: relative; }

.treffer {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(46, 42, 36, .18);
    max-height: 320px;
    overflow-y: auto;
    z-index: 30;
}
.treffer > * {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--beige-hell);
}
.treffer > *:last-child { border-bottom: none; }
.treffer > *:hover, .treffer > *.aktiv { background: var(--beige-hell); }

.treffer-text { flex: 1; padding: .75rem .8rem; cursor: pointer; min-width: 0; }
.treffer .meta { font-size: .78rem; color: var(--text-schwach); }

/* Loeschen-Kreuz in der Trefferliste - nur fuer Manager und Admin */
.treffer-weg {
    flex: 0 0 auto;
    background: transparent;
    color: var(--text-schwach);
    font-size: 1.4rem;
    line-height: 1;
    padding: .5rem .85rem;
    margin-right: .2rem;
    border-radius: var(--radius);
}
.treffer-weg:hover, .treffer-weg:active { background: var(--rot-bg); color: var(--rot); }

.gewaehlt {
    background: var(--ok-bg);
    border: 1px solid var(--gruen-hell);
    border-radius: var(--radius);
    padding: .8rem;
    margin-bottom: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
}
.gewaehlt .name { font-weight: 700; }
.gewaehlt .meta { font-size: .8rem; color: var(--text-schwach); }

/* ---------------------------------------------------------- Mengen-Raster */

.mengen { display: grid; gap: .5rem; }
.mengen .posten {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: .6rem;
    align-items: center;
    background: var(--weiss);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: .5rem .7rem;
}
.mengen .posten label { margin: 0; font-size: .95rem; font-weight: 600; }
.mengen .stepper { display: flex; gap: .3rem; }
.mengen .stepper button {
    padding: .55rem .7rem;
    background: var(--beige);
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
}
.mengen .stepper input { text-align: center; padding: .55rem .3rem; }

/* ---------------------------------------------------------- Meldungen */

.flash { padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-weight: 600; }
.flash.ok { background: var(--ok-bg); color: var(--gruen-dunkel); border: 1px solid var(--gruen-hell); }
.flash.error { background: var(--rot-bg); color: var(--rot); border: 1px solid var(--rot); }

#toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(150%);
    background: var(--gruen-dunkel);
    color: #fff;
    padding: .85rem 1.3rem;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    font-weight: 600;
    z-index: 100;
    transition: transform .22s ease;
    max-width: 90vw;
    text-align: center;
}
#toast.an { transform: translateX(-50%) translateY(0); }
#toast.fehler { background: var(--rot); }

/* ---------------------------------------------------------- Dialog */

dialog {
    border: none;
    border-radius: var(--radius);
    padding: 0;
    width: min(680px, 94vw);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
dialog::backdrop { background: rgba(46, 42, 36, .5); }
dialog .kopf {
    background: var(--gruen);
    color: #fff;
    padding: .9rem 1rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
dialog .kopf button { background: transparent; padding: .2rem .5rem; font-size: 1.3rem; }
dialog .inhalt { padding: 1rem; max-height: 70vh; overflow-y: auto; }

.filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter > * { flex: 1 1 140px; }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 1rem 0 2rem;
}
.pager .stand { font-size: .85rem; color: var(--text-schwach); padding: 0 .3rem; }

.hinweis { font-size: .82rem; color: var(--text-schwach); }
.rechts { text-align: right; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }

/* ---------------------------------------------------------- Desktop */

@media (min-width: 700px) {
    .kacheln { grid-template-columns: repeat(4, 1fr); }
    .mengen { grid-template-columns: repeat(2, 1fr); }
    h1 { font-size: 1.6rem; }
}

@media (min-width: 1024px) {
    .mengen { grid-template-columns: repeat(3, 1fr); }
}

/* Login steht allein */
body.login-seite { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
body.login-seite .karte { width: min(400px, 100%); }
body.login-seite .logo { text-align: center; margin-bottom: 1.2rem; }
body.login-seite .logo .marke { font-size: 1.5rem; font-weight: 700; color: var(--gruen); }
body.login-seite .logo .sub { color: var(--text-schwach); font-size: .9rem; }