/**
 * mobile.css - Mobile-Optimierungen
 */

/* ===== MOBILE NAVIGATION ===== */
@media (max-width: 768px) {
    /* Header kompakt */
    .header {
        padding: 4px 0;
    }
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 4px 8px;
    }
    .logo {
        font-size: 16px;
        text-align: center;
    }
    .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
        padding: 2px 0;
    }
    .nav a {
        padding: 4px 6px;
        font-size: 11px;
        white-space: nowrap;
        border-radius: 4px;
    }
    .nav a.active {
        background: rgba(79, 70, 229, 0.15);
    }
    .nav span {
        font-size: 11px;
        padding: 2px 4px;
    }
    
    /* Cards */
    .card {
        padding: 12px;
        margin-bottom: 12px;
    }
    .card-title {
        font-size: 17px;
    }
    
    /* Container */
    .container {
        padding: 0 8px;
        max-width: 100%;
    }
    
    /* Buttons */
    .btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    .btn-lg {
        padding: 10px 16px;
        font-size: 15px;
    }
    
    /* Formulare */
    .form-control {
        padding: 8px 10px;
        font-size: 14px;
    }
    .form-group {
        margin-bottom: 10px;
    }
    
    /* Tabellen */
    table {
        font-size: 12px;
    }
    table th, table td {
        padding: 4px 6px;
    }
    
    /* Bestellformular */
    .item-row {
        flex-direction: column;
        gap: 6px;
    }
    .item-row input[type="text"] {
        width: 100%;
    }
    .item-row input[type="number"] {
        width: 60px;
    }
    .remove-row {
        align-self: flex-end;
    }
    
    /* Status-Bubbles */
    .status-bubble {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* Bestellungen im Admin */
    .order-row {
        padding: 8px;
    }
    .order-items {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
    .order-item {
        font-size: 12px;
        padding: 2px 6px;
    }
    .order-total {
        font-size: 15px;
    }
    .order-actions {
        gap: 4px;
    }
    .order-actions .btn-sm {
        padding: 2px 6px;
        font-size: 11px;
    }
}

/* ===== SEHR KLEINE BILDSCHIRME ===== */
@media (max-width: 480px) {
    .nav a {
        padding: 2px 4px;
        font-size: 10px;
    }
    .logo {
        font-size: 14px;
    }
    .order-items {
        grid-template-columns: 1fr;
    }
    .card-title {
        font-size: 15px;
    }
    .status-bubble {
        font-size: 12px;
        padding: 6px 10px;
    }
    .notification-item {
        padding: 10px;
    }
    .notification-item .icon {
        font-size: 18px;
    }
    .notification-item .content .title {
        font-size: 13px;
    }
    .notification-item .content .message {
        font-size: 12px;
    }
    .badge-count, .badge-unread {
        font-size: 11px;
        padding: 2px 8px;
    }
}

/* ===== TOAST-NACHRICHTEN ===== */
.toast-container {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    max-width: 90%;
    width: 400px;
}
.toast {
    padding: 12px 16px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    margin-bottom: 8px;
    animation: slideUp 0.3s ease;
    font-size: 14px;
    text-align: center;
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.toast-success { background: #10B981; }
.toast-error { background: #EF4444; }
.toast-warning { background: #F59E0B; }
.toast-info { background: #3B82F6; }