/**
 * Stundenzettel Mobile CSS
 * Responsive Styles für Touch-Geräte
 *
 * Wird automatisch bei Bildschirmbreite < 768px aktiv
 */

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

    /* Allgemeine Anpassungen */
    .mod-stundenzettel .fichecenter {
        padding: 0 5px;
    }

    /* Tabs kompakter */
    .mod-stundenzettel .tabsElem a {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Banner kompakter */
    .mod-stundenzettel .arearef {
        padding: 10px !important;
    }

    /* ============================================
       LEISTUNGEN TABELLE -> KARTEN
       ============================================ */
    .mod-stundenzettel table.noborder tr.liste_titre th {
        display: none;
    }

    /* Jede Zeile wird zur Karte */
    .mod-stundenzettel table.noborder tr.oddeven {
        display: block;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin: 10px 0;
        padding: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mod-stundenzettel table.noborder tr.oddeven td {
        display: block;
        text-align: left !important;
        padding: 4px 0;
        border: none !important;
        width: 100% !important;
    }

    /* Labels vor den Werten (via CSS content) */
    .mod-stundenzettel table.noborder tr.oddeven td:before {
        content: attr(data-label);
        font-weight: bold;
        color: #666;
        display: inline-block;
        min-width: 80px;
        margin-right: 10px;
    }

    /* Zeit-Inputs nebeneinander */
    .mod-stundenzettel input[type="time"],
    .mod-stundenzettel select[name="time_start"],
    .mod-stundenzettel select[name="time_end"] {
        width: 45% !important;
        display: inline-block;
        font-size: 16px !important; /* Verhindert Zoom auf iOS */
        padding: 10px !important;
    }

    /* Textarea volle Breite */
    .mod-stundenzettel textarea {
        width: 100% !important;
        min-height: 80px;
        font-size: 16px !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* Number Inputs größer */
    .mod-stundenzettel input[type="number"] {
        width: 80px !important;
        font-size: 18px !important;
        padding: 12px 8px !important;
        text-align: center !important;
    }

    /* Text Inputs */
    .mod-stundenzettel input[type="text"] {
        width: 100% !important;
        font-size: 16px !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* ============================================
       BUTTONS - TOUCH-FREUNDLICH
       ============================================ */
    .mod-stundenzettel .fas,
    .mod-stundenzettel .far {
        font-size: 1.5em !important;
        padding: 8px !important;
    }

    /* Action Buttons (Plus/Minus/Save/Delete) */
    .mod-stundenzettel td .fa-plus-circle,
    .mod-stundenzettel td .fa-minus-circle,
    .mod-stundenzettel td .fa-save,
    .mod-stundenzettel td .fa-trash,
    .mod-stundenzettel td .fa-pencil-alt {
        font-size: 1.8em !important;
        padding: 12px !important;
        display: inline-block;
    }

    /* Button-Reihe horizontal */
    .mod-stundenzettel .mobile-actions {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }

    /* ============================================
       PRODUKTE SECTION
       ============================================ */

    /* Produkt-Karte */
    .mod-stundenzettel table.noborder tr.oddeven td:first-child {
        font-weight: bold;
        font-size: 14px;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #eee !important;
        margin-bottom: 8px;
    }

    /* Mengen-Steuerung als Inline-Block */
    .mod-stundenzettel .qty-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin: 10px 0;
    }

    /* Plus/Minus Buttons größer */
    .mod-stundenzettel a[onclick*="plusQty"],
    .mod-stundenzettel a[onclick*="Qty"] {
        padding: 15px !important;
    }

    /* ============================================
       SUMMENZEILEN
       ============================================ */
    .mod-stundenzettel tr.liste_total {
        display: block;
        background: #f8f9fa;
        border: 2px solid #28a745;
        border-radius: 8px;
        padding: 15px;
        margin: 10px 0;
        text-align: center !important;
    }

    .mod-stundenzettel tr.liste_total td {
        display: inline-block;
        text-align: center !important;
        padding: 5px !important;
        border: none !important;
    }

    /* ============================================
       SECTION HEADER
       ============================================ */
    .mod-stundenzettel h3 {
        font-size: 18px;
        padding: 10px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 8px;
        margin: 15px 0 10px 0;
    }

    .mod-stundenzettel tr.liste_titre th[colspan] {
        display: block !important;
        font-size: 16px;
        padding: 12px !important;
        background: #f8f9fa;
        border-radius: 8px;
        margin: 15px 0 5px 0;
    }

    /* ============================================
       FORMULAR-CARDS (Hinzufügen)
       ============================================ */
    .mod-stundenzettel tr.oddeven form {
        display: block;
    }

    .mod-stundenzettel tr.oddeven td[colspan] {
        padding: 10px 0 !important;
    }

    /* Produkt-Auswahl Dropdown */
    .mod-stundenzettel select.minwidth200,
    .mod-stundenzettel select.minwidth300 {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px !important;
        margin-bottom: 10px;
    }

    /* ============================================
       MERKZETTEL/NOTIZEN
       ============================================ */
    .mod-stundenzettel .fa-check-square,
    .mod-stundenzettel .fa-square {
        font-size: 1.8em !important;
        padding: 10px !important;
    }

    /* ============================================
       BADGES
       ============================================ */
    .mod-stundenzettel .badge {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    /* ============================================
       ACTION BUTTONS (Freigeben/Löschen)
       ============================================ */
    .mod-stundenzettel .tabsAction {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 15px;
    }

    .mod-stundenzettel .tabsAction a.butAction,
    .mod-stundenzettel .tabsAction a.butActionDelete {
        flex: 1 1 45%;
        text-align: center;
        padding: 15px 10px !important;
        font-size: 14px !important;
        border-radius: 8px;
    }

    /* ============================================
       HIDE UNNECESSARY ELEMENTS ON MOBILE
       ============================================ */
    .mod-stundenzettel .opacitymedium small {
        display: none;
    }

    /* ============================================
       SELECT2 DROPDOWNS FIX
       ============================================ */
    .mod-stundenzettel .select2-container {
        width: 100% !important;
    }

    .mod-stundenzettel .select2-selection {
        min-height: 44px !important;
        font-size: 16px !important;
    }
}

/* ============================================
   EXTRA SMALL DEVICES (< 480px)
   ============================================ */
@media screen and (max-width: 480px) {

    /* Noch kompaktere Tabs */
    .mod-stundenzettel .tabsElem a {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Buttons nebeneinander */
    .mod-stundenzettel .tabsAction a.butAction,
    .mod-stundenzettel .tabsAction a.butActionDelete {
        flex: 1 1 100%;
    }

    /* Zeit-Inputs untereinander */
    .mod-stundenzettel input[type="time"],
    .mod-stundenzettel select[name="time_start"],
    .mod-stundenzettel select[name="time_end"] {
        width: 100% !important;
        margin-bottom: 8px;
    }
}

/* ============================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================ */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .mod-stundenzettel table.noborder tr.oddeven {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .mod-stundenzettel table.noborder tr.oddeven td {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* ============================================
   TOUCH FEEDBACK
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    .mod-stundenzettel a:active,
    .mod-stundenzettel button:active {
        opacity: 0.7;
        transform: scale(0.98);
    }

    .mod-stundenzettel .fas:active,
    .mod-stundenzettel .far:active {
        transform: scale(1.1);
    }
}