/* ============================================
   RESPONSIVE CSS FÜR PAKETSHOP SYSTEM
   Version FINAL - Nur die notwendigen Fixes
   ============================================ */

/* Basis */
* {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

/* Einstellungen-Dropdown OHNE Scrollbar */
#einstellungen-dropdown,
#pakete-dropdown,
.dropdown-content {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Sperrgut Modal verstecken */
#sperrgut-modal:not([style*="display: block"]) {
    display: none !important;
}

#sperrgut-backdrop:not([style*="display: block"]) {
    display: none !important;
}

/* ============================================
   DESKTOP - Sendungen Modal Scroll Fix
   ============================================ */
#sendungen-modal-content {
    display: flex;
    flex-direction: column;
}

#sendungen-modal-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(90vh - 60px);
}

#sendungen-content {
    flex: 1;
    overflow-y: auto;
}

/* MOBILE (unter 768px)
   ============================================ */
@media screen and (max-width: 768px) {

    /* Header - EXAKT wie Kundenportal */
    .main-header {
        padding: 15px 0 !important;
        position: relative;
    }

    .header-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        padding: 10px;
    }

    .logo {
        flex: none;
        text-align: center;
    }
    
    .logo img {
        height: 52px !important;
        max-width: none !important;
        padding: 4px 10px !important;
        border-radius: 4px;
        background: white;
    }

    .header-info {
        display: none;
    }

    /* Hamburger Menü - EXAKT wie Kundenportal */
    #mobile-menu-toggle {
        display: block !important;
        position: absolute;
        left: 15px !important;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
        background: none;
        border: none;
        padding: 5px;
        cursor: pointer;
    }

    #mobile-menu-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background: white;
        margin: 5px 0;
        transition: all 0.3s;
    }

    /* Navigation - LINKS SLIDING */
    .main-nav {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        background: #2c3e50;
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .main-nav.active {
        left: 0;
    }

    .nav-content {
        display: flex !important;
        flex-direction: column !important;
        flex: 1;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        background: transparent;
        z-index: auto;
        padding-top: 60px;
        padding-bottom: env(safe-area-inset-bottom, 20px);
        min-height: 100%;
    }

    .nav-content.show {
        display: flex !important;
    }

    /* WICHTIG: Alle flex:1 inline styles überschreiben */
    .nav-content > * {
        flex: none !important;
    }

    .nav-item {
        width: 100% !important;
        flex: none !important;
        padding: 16px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: left !important;
        background: transparent !important;
        display: block !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    .nav-item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .nav-item.active {
        background: #3498db !important;
    }
    
    .nav-item.active::after {
        display: none !important;
    }
    
    /* Dropdown Container */
    .nav-dropdown {
        flex: none !important;
        width: 100% !important;
        position: relative !important;
    }

    /* Dropdown Content - EINHEITLICHE SCHRIFT */
    .dropdown-content {
        position: static !important;
        background: #34495e !important;
        box-shadow: none !important;
    }

    .dropdown-content a {
        padding: 14px 20px 14px 40px !important;
        font-size: 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Backdrop für Menü - NEU */
    .mobile-menu-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .mobile-menu-backdrop.active {
        display: block;
    }

    /* Content */
    .main-content {
        padding: 0 8px;
        margin: 10px auto;
    }

    h1 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* Stats */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 12px;
        text-align: center;
    }

    .stat-number {
        font-size: 20px;
        font-weight: bold;
    }

    .stat-label {
        font-size: 10px;
    }

    /* Alle Pakete und Ungeklärt nebeneinander (keine volle Breite) */

    /* ============================================
       SENDUNGEN MODAL - VOLLBILD MOBILE
       ============================================ */
    #sendungen-modal {
        padding: 0 !important;
    }
    
    #sendungen-modal-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    #sendungen-modal-content > div:first-child {
        padding: 12px 15px !important;
        flex-shrink: 0 !important;
    }
    
    #modal-title {
        font-size: 14px !important;
    }
    
    #sendungen-modal-body {
        padding: 10px !important;
        padding-bottom: 0 !important;
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* ============================================
       FILTER BUTTONS - 5 Buttons Grid
       ============================================ */
    #sendungen-filters {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        margin-bottom: 10px !important;
        flex-shrink: 0 !important;
    }

    #filter-alle,
    #filter-lagernde,
    #filter-erfasste,
    #filter-abgeholte,
    #filter-archivierte {
        width: 100% !important;
        padding: 8px 4px !important;
        font-size: 11px !important;
        margin: 0 !important;
        border-radius: 4px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    
    #sendungen-filters .btn-primary {
        background: #3498db !important;
        color: white !important;
        border: 1px solid #3498db !important;
    }
    
    #sendungen-filters .btn-secondary {
        background: white !important;
        color: #333 !important;
        border: 1px solid #ddd !important;
    }
    
    /* ============================================
       SENDUNGEN CONTENT
       ============================================ */
    #sendungen-content {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important;
    }
    
    /* Letztes Element im Content - kein extra margin */
    #sendungen-content > div:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Sendungen Liste */
    .sendungen-liste {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    /* Package Cards - Button unten auf Mobile */
    .package-card {
        flex-direction: column !important;
    }
    
    .package-card .einlagern-btn-container {
        width: auto !important;
        margin-top: 10px !important;
    }
    
    .package-card .einlagern-btn-container .btn {
        width: auto !important;
        padding: 8px 20px !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }
    
    .package-card .einlagern-btn-container .btn .material-symbols-outlined {
        font-size: 16px !important;
        line-height: 1 !important;
    }

    /* ============================================
       DASHBOARD PAKETE - MIT FARBBALKEN
       ============================================ */
    #dashboard .package-item,
    div[id="alle-pakete"] .package-item,
    div:has(> h2:contains("Alle Pakete")) .package-item {
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        padding: 10px !important;
        margin-bottom: 8px !important;
        position: relative !important;
    }


    /* Farbbalken NUR im Dashboard */
    #dashboard .package-item::before,
    div[id="alle-pakete"] .package-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: #ffc107;
        border-radius: 6px 0 0 6px;
    }

    /* ============================================
       KUNDEN-DETAIL-MODAL - MOBILE VOLLBILD
       ============================================ */
    #kunden-detail-modal {
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    #kunden-detail-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        height: 100vh !important;
        max-height: 100dvh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Header sticky */
    #kunden-detail-modal > div > div:first-child {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
    }
    
    /* Content scrollbar */
    #kunden-detail-modal > div > div:last-child {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: 180px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    
    #kunden-detail-content {
        overflow: visible !important;
        padding-bottom: 100px !important;
    }
    
    /* Tabs im Kundendetail */
    #kunden-detail-modal .tab-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 5px !important;
        padding-bottom: 5px !important;
    }
    
    #kunden-detail-modal .tab-buttons button {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    
    /* Form-Felder im Kundendetail - ALLE gleiche Höhe */
    #kunden-detail-modal input:not([type="checkbox"]):not([type="radio"]),
    #kunden-detail-modal textarea,
    #kunden-detail-modal select,
    #kunden-detail-modal select.form-control {
        font-size: 15px !important;
        padding: 8px 10px !important;
        height: 38px !important;
        min-height: 38px !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
    }
    
    /* DROPDOWN/SELECT FIX - Schrift lesbar machen */
    #kunden-detail-modal select,
    #kunden-detail-modal select.form-control {
        padding-right: 32px !important;
        color: #333 !important;
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 8px center !important;
        background-size: 14px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    
    #kunden-detail-modal select option {
        color: #333 !important;
        background-color: #fff !important;
        padding: 8px !important;
    }
    
    #kunden-detail-modal label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
        color: #555 !important;
    }
    
    #kunden-detail-modal .form-group {
        margin-bottom: 12px !important;
    }
    
    /* Buttons im Kundendetail */
    #kunden-detail-modal .btn:not(.icon-btn),
    #kunden-detail-modal button[type="submit"] {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    /* Icon-Buttons Container unten - extra Abstand */
    #kunden-detail-content > div:last-child {
        padding-bottom: 30px !important;
        margin-bottom: 50px !important;
    }

    /* ============================================
       PAKET-DETAIL-MODAL - MOBILE VOLLBILD
       ============================================ */
    #paket-detail-modal {
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    #paket-detail-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        height: 100vh !important;
        max-height: 100dvh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Header sticky */
    #paket-detail-modal > div > div:first-child {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        flex-shrink: 0 !important;
    }
    
    /* Content scrollbar */
    #paket-detail-modal > div > div:last-child {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: 180px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Form-Felder im Paketdetail - ALLE gleiche Höhe */
    #paket-detail-modal input:not([type="checkbox"]):not([type="radio"]),
    #paket-detail-modal textarea,
    #paket-detail-modal select,
    #paket-detail-modal select.form-control {
        font-size: 15px !important;
        padding: 8px 10px !important;
        height: 38px !important;
        min-height: 38px !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
    }
    
    /* DROPDOWN/SELECT FIX für Paketdetail */
    #paket-detail-modal select,
    #paket-detail-modal select.form-control {
        padding-right: 32px !important;
        color: #333 !important;
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 8px center !important;
        background-size: 14px !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    
    #paket-detail-modal select option {
        color: #333 !important;
        background-color: #fff !important;
    }
    
    #paket-detail-modal label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
        color: #555 !important;
    }
    
    /* Form-Rows auf Mobile untereinander */
    #paket-detail-modal .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    #paket-detail-modal .form-group {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    
    /* Buttons im Paketdetail */
    #paket-detail-modal .btn:not(.icon-btn),
    #paket-detail-modal button[type="submit"] {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    /* Icon-Buttons Container unten - extra Abstand */
    #paket-detail-form > div:last-child {
        padding-bottom: 30px !important;
        margin-bottom: 50px !important;
    }

    /* ============================================
       ASSIGN-CUSTOMER-MODAL - MOBILE
       ============================================ */
    #assign-customer-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #assign-customer-modal > div > div:last-child {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }

    /* Kundendaten auf Mobile - EINHEITLICH 13px */
    #abholen-kunde-info > div {
        font-size: 13px !important;
    }
    
    #abholen-kunde-info > div strong {
        font-size: 13px !important;
    }
    
    /* Abholberechtigte auf Mobile - 13px */
    #abholen-kunde-info > div[style*="background: #fff3cd"] {
        font-size: 13px !important;
    }
    
    #abholen-kunde-info > div[style*="background: #fff3cd"] strong {
        font-size: 13px !important;
    }
    
    /* Abholberechtigte Layout auf Mobile - Icon oben, Namen darunter */
    .abholberechtigte-box {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .abholberechtigte-box .key-icon {
        font-size: 18px !important;
        margin-bottom: 5px !important;
    }
    
    .abholberechtigte-box .authorized-names {
        font-size: 13px !important;
        font-weight: bold !important;
    }
    
    /* Guthaben-Box auf Mobile - 13px */
    #abholen-kunde-info > div[style*="background: #d1ecf1"] {
        font-size: 13px !important;
    }
    
    #abholen-kunde-info > div[style*="background: #d1ecf1"] strong {
        font-size: 13px !important;
    }

    /* Servicenummer Input auf Mobile - GRÖßER und schmaler */
    #abholen-servicenummer {
        font-size: 25px !important;
        font-weight: 700 !important;
        padding: 25px 15px !important;
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    /* Abstand unter dem SVN-Eingabefeld zum Kundenbereich */
    #abholen > div[style*="max-width: 250px"] {
        margin-bottom: 20px !important;
    }

    /* Package Items im Abholen-Bereich - KLEINER */
    #abholen-pakete .package-item,
    #abholen .package-item {
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 6px !important;
        padding: 12px 10px !important;
        padding-right: 60px !important;
        margin-bottom: 8px !important;
        position: relative !important;
        min-height: 100px !important;
        width: calc(100% - 10px) !important;
        margin-left: 5px !important;
        margin-right: 5px !important;
    }

    /* Gescannte Pakete - GRÜN markieren auf Mobile */
    #abholen .package-item[style*="background: rgb(212, 237, 218)"],
    #abholen .package-item[style*="background: #d4edda"] {
        background: #d4edda !important;
        border: 2px solid #28a745 !important;
    }

    /* Titel "Nicht eingelagerte Pakete" etc. */
    #recent-activities .card-header,
    .card .card-header {
        font-size: 14px !important;
        padding: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Filter-Container */
    #recent-activities .card-header>div {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    /* Filter-Inputs auf Mobile */
    #quick-filter-status,
    #quick-filter-search,
    #quick-filter-date-from,
    #quick-filter-date-to {
        width: 100% !important;
        font-size: 13px !important;
        padding: 6px !important;
        margin: 0 !important;
    }

    /* "Gefunden: X Pakete" Text */
    #recent-activities>div:first-child {
        font-size: 12px !important;
    }

    /* Package ID */
    #abholen .package-item .package-id {
        font-size: 14px !important;
        font-weight: bold !important;
        margin-bottom: 5px !important;
    }

    /* Package Details - GRÖßERE Labels */
    #abholen .package-item .package-details {
        font-size: 12px !important;
    }
    
    #abholen .package-item .package-details div {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 2px !important;
    }
    
    #abholen .package-item .package-details div[style] {
        font-size: 12px !important;
    }

    /* Package Preis - VIEL GRÖßER mit inline override */
    #abholen .package-item .package-price {
        font-size: 20px !important;
        font-weight: bold !important;
        color: #28a745 !important;
        position: absolute !important;
        right: 8px !important;
        top: 8px !important;
    }

    /* Icon-Status INNERHALB des Package Items */
    #abholen .package-item [id^="scan-status-"] {
        position: absolute !important;
        right: 8px !important;
        bottom: 8px !important;
        transform: none !important;
        width: auto !important;
    }

    /* Icons im scan-status */
    #abholen .package-item [id^="scan-status-"] .material-symbols-outlined {
        font-size: 24px !important;
        cursor: pointer !important;
    }

    /* Formulare */
    .form-control {
        width: 100%;
        font-size: 15px;
        padding: 8px 10px;
        height: 38px;
    }

    /* ============================================
       ALLE MODAL-FORMULARE - Einheitliche Höhe
       ============================================ */
    [id$="-modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    [id$="-modal"] select,
    [id$="-modal"] select.form-control {
        font-size: 15px !important;
        padding: 8px 10px !important;
        height: 38px !important;
        min-height: 38px !important;
        line-height: 1.3 !important;
        box-sizing: border-box !important;
    }
    
    [id$="-modal"] select {
        padding-right: 32px !important;
        color: #333 !important;
        background-color: #fff !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 8px center !important;
        background-size: 14px !important;
    }
    
    [id$="-modal"] label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
        color: #555 !important;
    }
    
    [id$="-modal"] .form-group {
        margin-bottom: 12px !important;
    }
    
    [id$="-modal"] .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    [id$="-modal"] .form-row .form-group {
        width: 100% !important;
    }

    /* ============================================
       FILIAL-MODAL - MOBILE VOLLBILD
       ============================================ */
    #filial-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        height: 100vh !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #filial-modal > div > div:first-child {
        flex-shrink: 0 !important;
    }
    
    #filial-modal > div > div:last-child {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: 100px !important;
    }
    
    /* ============================================
       SPERRGUT-MODAL - MOBILE
       ============================================ */
    #sperrgut-modal > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #sperrgut-modal > div > div:last-child {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 100px !important;
    }
    
    /* Checkboxen und Radiobuttons größer für Touch */
    #sperrgut-modal input[type="checkbox"],
    #sperrgut-modal input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        margin-right: 10px !important;
        cursor: pointer !important;
        accent-color: #3498db !important;
        flex-shrink: 0 !important;
    }
    
    /* Labels neben Checkboxen/Radios */
    #sperrgut-modal .form-group > label:has(input[type="checkbox"]),
    #sperrgut-modal .form-group > label:has(input[type="radio"]),
    #sperrgut-modal .form-group label:has(input[type="checkbox"]),
    #sperrgut-modal .form-group label:has(input[type="radio"]) {
        display: flex !important;
        align-items: center !important;
        font-size: 14px !important;
        padding: 6px 0 !important;
        cursor: pointer !important;
        min-height: 36px !important;
    }
    
    /* Paletten-Option Container linksbündig */
    #sperrgut-modal .form-group > div[style*="margin-left"] {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Radiobutton-Labels im Paletten-Bereich */
    #sperrgut-modal .form-group > div label {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 5px !important;
        padding: 5px 0 !important;
    }

    /* ============================================
       ALLGEMEIN - Checkboxen und Radios in Modals
       ============================================ */
    [id$="-modal"] input[type="checkbox"],
    [id$="-modal"] input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        margin-right: 8px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    
    [id$="-modal"] label:has(input[type="checkbox"]),
    [id$="-modal"] label:has(input[type="radio"]) {
        display: flex !important;
        align-items: center !important;
        min-height: 36px !important;
        cursor: pointer !important;
    }

    /* Buttons */
    .btn {
        padding: 7px 14px;
        font-size: 13px;
        border-radius: 4px;
    }

    /* Cards */
    .card {
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 6px;
    }

    /* Einheitliche Schriftgrößen für Abholen-Bereich */
    #abholen .card-header {
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 6px 8px !important;
        /* Reduziert */
        margin-bottom: 5px !important;
    }

    /* Servicenummer Card mit mehr Innenabstand */
    #abholen .card:has(#abholen-servicenummer) {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* Scanner Button anpassen */
    #abholen div[style*="margin: 20px 0"] {
        margin: 8px 0 !important;
        /* Reduziert von 20px */
    }

    #abholen div[style*="margin: 20px 0"] button {
        width: 36px !important;
        height: 36px !important;
    }

    /* Gescannte Pakete Info */
    #abholen .card div[style*="margin-top"] strong {
        font-size: 11px !important;
    }

    /* Freiraum-Optimierung für Abholen */
    #abholen h1 {
        margin-bottom: 8px !important;
    }

    #abholen .card {
        margin-bottom: 8px !important;
        padding: 8px !important;
    }

    /* Eingelagerte Sendungen Container */
    #abholen .package-list {
        padding-top: 5px !important;
    }

    /* Gescannte Pakete Info Box */
    #abholen .card>div[style*="margin-top: 20px"] {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        padding: 6px 10px !important;
    }

    /* Total Box */
    #abholen .total-box {
        margin: 8px 5px !important;
        padding: 10px !important;
    }

    /* ============================================
       EINLAGERUNG - MOBILE FIX
       ============================================ */
    #einlagerung .card {
        padding: 10px !important;
        margin: 0 5px 10px 5px !important;
        width: calc(100% - 10px) !important;
    }

    #einlagerung h1 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
        padding: 0 5px !important;
    }

    /* Modus-Auswahl mit QR-Icon - Mobile Layout */
    #einlagerung div[style*="text-align: center"] {
        text-align: left !important;
        padding: 10px !important;
        margin-bottom: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* QR-Icon auf Mobile - LINKS */
    #einlagerung div[style*="position: relative"] > span.material-symbols-outlined {
        position: static !important;
        transform: none !important;
        font-size: 28px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        margin-right: auto !important;
        padding-left: 5px !important;
    }

    #einlagerung div[style*="display: inline-flex"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-end !important;
        order: 2 !important;
    }

    #einlagerung label {
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* Scanner Button - EXAKT WIE BEIM ABHOLEN aber kompakter */
    #einlagerung div[style*="text-align: center"][style*="margin-bottom: 30px"] {
        text-align: left !important;
        margin: 8px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* NICHTS ÄNDERN an Scanner-Buttons */

    /* Card Header - einheitlich */
    #einlagerung .card-header {
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 6px 8px !important;
        margin-bottom: 5px !important;
    }

    /* Einlagerungs-Grid */
    .einlagerung-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Scan-Boxen */
    .scan-box {
        width: 100% !important;
        padding: 12px 10px !important;
        margin: 0 !important;
    }

    .scan-box h3 {
        font-size: 13px !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
    }

    .scan-box input {
        font-size: 15px !important;
        padding: 8px 10px !important;
        height: 38px !important;
        width: 100% !important;
    }

    .scan-status {
        font-size: 11px !important;
        margin-top: 6px !important;
    }

    /* Einlagern Button */
    #einlagern-btn {
        font-size: 32px !important;
    }

    /* Alert Messages */
    #einlagerung .alert {
        font-size: 11px !important;
        padding: 8px !important;
        margin: 8px 5px !important;
    }

    /* ============================================
       EINHEITLICHE AKTIONS-BUTTONS (MOBILE)
       Nur diese spezifischen Buttons!
       ============================================ */


    /* Erfassung: "Erfassen & Label drucken" und "Zurücksetzen" */
    #erfassung button[type="submit"],
    #erfassung button[onclick*="reset"] {
        font-size: 14px !important;
        padding: 10px 24px !important;
        width: auto !important;
        display: inline-block !important;
        margin: 5px !important;
    }

    /* Abholen: "Abbrechen" und "Gescannte Pakete abschließen" */
    #abholen button[onclick*="cancelCheckout"],
    #abholen button[onclick*="abortCheckout"],
    #abholen button[onclick*="completeCheckout"] {
        font-size: 14px !important;
        padding: 10px 24px !important;
        width: auto !important;
        display: inline-block !important;
        margin: 5px !important;
    }

    /* Button Container für diese Buttons */
    #abholen>div>div[style*="display: flex"] {
        margin-top: 8px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }

    #abholen>div>div[style*="display: flex"] button {
        width: auto !important;
        flex: 0 1 auto !important;
        margin: 0 !important;
    }
    
    /* Checkout Icons auf Mobile */
    #abholen #checkout-btn,
    #abholen span[onclick*="resetAbholen"] {
        font-size: 32px !important;
    }
    
    /* Checkout Buttons Container - NEBENEINANDER und ZENTRIERT auf Mobile */
    #abholen div[style*="display: flex"][style*="gap: 20px"] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 30px !important;
        margin: 20px auto !important;
        width: 100% !important;
    }
}

/* Sehr kleine Bildschirme */
@media screen and (max-width: 480px) {

    /* Noch kleinerer Button */
    #abholen .package-item button {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }

    /* Edit-Buttons auch klein aber nicht gequetscht */
    .package-item button[onclick*="editBranch"],
    .package-item button[onclick*="editKunde"] {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        padding: 4px !important;
        min-width: 32px !important;
    }

    /* Buttons untereinander */
    #abholen>div>div[style*="display: flex"] {
        flex-direction: column !important;
    }

    #abholen>div>div[style*="display: flex"] button {
        width: 100% !important;
        margin: 3px 0 !important;
    }
}

/* Desktop */
@media screen and (min-width: 769px) {
    #mobile-menu-toggle {
        display: none !important;
    }

    .nav-content {
        display: flex !important;
    }
}

/* iOS */
@supports (-webkit-touch-callout: none) {

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}
/* ============================================
   LAGERORT BADGES FÜR SCANNER-MODAL
   ============================================ */

@media screen and (max-width: 768px) {
    
    #location-badges-container {
        max-height: 140px;
        overflow: hidden;
    }
    
    #location-badges {
        padding: 5px 0;
        gap: 6px !important;
    }
    
    .location-badge {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        animation: fadeInBadge 0.3s ease-in;
    }
    
    @keyframes fadeInBadge {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes fadeOutBadge {
        from {
            opacity: 1;
            transform: scale(1);
        }
        to {
            opacity: 0;
            transform: scale(0.8);
        }
    }
    
    .location-badge.removing {
        animation: fadeOutBadge 0.3s ease-out forwards;
    }
    
    @keyframes pulseBadge {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.15);
        }
    }
    
    .location-badge.scanned {
        animation: pulseBadge 0.4s ease-in-out;
    }
    
    .badge-label {
        background: #2196F3;
        color: white;
        padding: 5px 6px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        min-width: 42px;
        max-width: 52px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .badge-label.location-10,
    .badge-label.location-11,
    .badge-label.location-12,
    .badge-label.location-13,
    .badge-label.location-14,
    .badge-label.location-15,
    .badge-label.location-16 {
        background: #2196F3; /* Blau */
    }
    
    .badge-label.location-b {
        background: #4CAF50; /* Grün */
    }
    
    .badge-label.location-w {
        background: #F44336; /* Rot */
    }
    
    .badge-label.location-2 {
        background: #FF9800; /* Orange */
    }
    
    .badge-label.location-s {
        background: #00BCD4; /* Türkis */
    }
    
    .badge-label.location-l {
        background: #9C27B0; /* Violett */
    }
    
    .badge-label.location-other {
        background: #9E9E9E; /* Grau */
    }
    
    .badge-count {
        background: white;
        color: #333;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
}
/* ============================================
   DRUCKER-KONFIGURATION MOBILE
   ============================================ */

@media screen and (max-width: 768px) {
    .printer-card {
        margin-bottom: 12px !important;
    }
    
    .printer-card-content {
        display: block !important;
    }
    
    .printer-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 12px !important;
        gap: 15px !important;
    }
}

/* ============================================
   CARRIER STATS - Desktop 2 Spalten
   ============================================ */
@media screen and (min-width: 769px) {
    #carrier-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .carrier-logo {
        height: 32px !important;
    }
}

/* ============================================
   CARRIER STATS - Mobile Anpassung
   ============================================ */
@media screen and (max-width: 768px) {
    /* 1 Spalte auf Mobile */
    #carrier-stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    .carrier-card {
        padding: 10px 12px !important;
    }
    
    /* Schriftgröße wie andere Kacheln (20px) */
    .stat-card.carrier-card .carrier-number {
        font-size: 20px !important;
    }
    
    .carrier-card .carrier-logo {
        height: 24px !important;
    }
    
    .express-badge {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
    
    .country-badge {
        font-size: 10px !important;
        padding: 2px 5px !important;
    }
}

/* ============================================
   PAKETE-ANSICHT - Desktop KEIN Doppel-Scrollen
   ============================================ */
@media screen and (min-width: 769px) {
    #pakete-liste {
        max-height: none !important;
        overflow-y: visible !important;
        overflow: visible !important;
    }
    
    #pakete-ansicht .card {
        overflow: visible !important;
    }
}

/* ============================================
   PAKETE-ANSICHT - Mobile Anpassungen
   ============================================ */
@media screen and (max-width: 768px) {
    #pakete-ansicht h1 {
        font-size: 20px !important;
    }
    
    #pakete-ansicht .card {
        margin-bottom: 15px !important;
    }
    
    #pakete-ansicht .card-header {
        padding: 12px 15px !important;
    }
    
    /* Filter-Bereich mobil */
    #pakete-ansicht .card > div[style*="padding: 15px"] > div {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    #pakete-ansicht select,
    #pakete-ansicht input[type="text"] {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    
    #pakete-ansicht input[type="date"] {
        flex: 1 !important;
    }
    
    /* Mobile: Kein eigenes Scrollen - Seite scrollt */
    #pakete-liste {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* ============================================
   DROPDOWN SCROLLBAR FIX - FINAL OVERRIDE
   ============================================ */
#einstellungen-dropdown,
#pakete-dropdown {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

#einstellungen-dropdown::-webkit-scrollbar,
#pakete-dropdown::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.dropdown-content {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
}

/* ============================================
   ABSOLUTE FINAL - Dropdown ohne Scrollbar
   Gilt für ALLE Bildschirmgrößen
   ============================================ */
nav .nav-dropdown .dropdown-content,
nav #einstellungen-dropdown,
nav #pakete-dropdown,
.main-nav .dropdown-content,
.nav-content .dropdown-content {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

nav .nav-dropdown .dropdown-content::-webkit-scrollbar,
nav #einstellungen-dropdown::-webkit-scrollbar,
nav #pakete-dropdown::-webkit-scrollbar,
.main-nav .dropdown-content::-webkit-scrollbar,
.nav-content .dropdown-content::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Parent-Elemente auch overflow visible */
.main-nav,
.nav-content,
.nav-dropdown {
    overflow: visible !important;
}

/* ============================================
   DESKTOP (über 768px) - Dropdown Fix
   ============================================ */
@media screen and (min-width: 769px) {
    #einstellungen-dropdown,
    #pakete-dropdown,
    .dropdown-content {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    
    #einstellungen-dropdown::-webkit-scrollbar,
    #pakete-dropdown::-webkit-scrollbar,
    .dropdown-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .main-nav {
        overflow: visible !important;
    }
    
    .nav-content {
        overflow: visible !important;
    }
    
    .nav-dropdown {
        overflow: visible !important;
    }
}
/* ============================================
   MOBILE DRUCKER-SELECTOR - NUR IM MENÜ
   ============================================ */
@media screen and (max-width: 768px) {
    /* KEIN position fixed - bleibt im Menü-Flow */
    #mobile-printer-selector {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        z-index: auto;
    }
    
    #mobile-printer-select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 24px;
        padding-right: 40px !important;
    }
    
    #mobile-printer-select option {
        background: #2c3e50;
        color: white;
        padding: 10px;
    }
    
    #mobile-printer-select option:disabled {
        color: #666;
    }
}

/* Desktop: Drucker-Selector komplett verstecken */
@media screen and (min-width: 769px) {
    #mobile-printer-selector {
        display: none !important;
    }
}