/* stil.css - Zentrales Design für die Speise.eu App */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 1em;
    color: #333;
}
.container {
    max-width: 900px;
    margin: auto;
}
h1, h2 {
    color: #1d3557;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
    margin-top: 1.5em;
    margin-bottom: 1em;
}
a {
    color: #007bff;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}

/* KARTEN-LAYOUT MIT CSS GRID */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5em;
    margin-bottom: 2em;
}
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1.5em;
    text-decoration: none;
    color: #333;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* STATISTIK-KARTEN */
.stat-card { text-align: center; color: white; }
.stat-card .icon { font-size: 2.5em; opacity: 0.8; }
.stat-card .number { font-size: 3em; font-weight: bold; margin: 0.2em 0; }
.stat-card .label { font-size: 1em; opacity: 0.9; }
.expiring { background: linear-gradient(135deg, #ff8c00, #ff6347); }
.shopping-list { background: linear-gradient(135deg, #1e90ff, #00bfff); }
.catalog { background: linear-gradient(135deg, #3cb371, #2e8b57); }

/* LISTE DER LAGERORTE & AKTIONEN */
.location-list { padding: 1em 1.5em; }
.location-list a { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8em; font-size: 1.1em; padding: 12px 15px; background-color: #e9ecef; border-radius: 6px; color: #495057; font-weight: 500; }
.location-list a:last-child { margin-bottom: 0; }
.item-count { font-size: 0.9em; font-weight: bold; background-color: #ced4da; color: #495057; padding: 2px 8px; border-radius: 10px; }

/* SCANNER-BUTTON */
.scanner-button { display: block; width: 100%; padding: 15px; margin-bottom: 2em; background-color: #28a745; color: white; text-align: center; font-size: 1.2em; font-weight: bold; border-radius: 8px; box-sizing: border-box; transition: transform 0.2s, box-shadow 0.2s; }
.scanner-button:hover { color: white; transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }

/* TABELLEN, FORMULARE etc. */
table { width: 100%; border-collapse: collapse; margin-top: 1.5em; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: #f8f9fa; font-weight: 600; }
form { margin-top: 1em; }
label { display: block; margin-bottom: 5px; font-weight: 600; }
input[type="text"], input[type="number"], input[type="date"], select { display: block; width: 100%; margin-bottom: 15px; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; }

/* ALLGEMEINE BUTTON-STILE */
input[type="submit"], .button { background-color: #007bff; color: white; border: none; cursor: pointer; padding: 10px 15px; border-radius: 4px; font-size: 1em; font-weight: 600; text-align: center; text-decoration: none; display: inline-block; }
.danger-btn { background-color: #dc3545; }
.button-warning { background-color: #ffc107; color: #212529; }
.checkbox-label { display: flex; align-items: center; width: auto; font-weight: normal; }
.checkbox-label input { width: auto; margin-right: 10px; }
.info-link { font-size: 0.9em; text-align: right; margin-top: -10px; margin-bottom: 15px; }
.aktions-zelle { display: flex; gap: 10px; align-items: center; }

/* KLASSEN FÜR WARNFARBEN */
tr.warnung {
    background-color: #fff3cd !important;
}
tr.gefahr {
    background-color: #f8d7da !important;
    font-weight: bold;
}

/* Stile für mobile Geräte */
@media (max-width: 768px) {
    body { padding: 0.5em; }
    .container { padding: 0; }
    .card { padding: 1em; }
    h1 { font-size: 1.5em; }
    table, thead, tbody, th, td, tr { display: block; }
    thead tr { position: absolute; top: -9999px; left: -9999px; }
    tr { border: 1px solid #ccc; border-radius: 8px; margin-bottom: 1em; background-color: white !important; }
    td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; text-align: right; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; }
    td:before { content: attr(data-label); position: absolute; left: 10px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; }
    .aktions-zelle { justify-content: flex-end; }
}

/* Stil für Lade-Spinner */
.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}