dolibarr.stundenzettel/css/stundenzettel-mobile.css

/**
 * Stundenzettel Mobile CSS
 * Responsive Styles für Touch-Geräte
 * Version 1.2.0
 */

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

    /* Viewport-Fix: Kein horizontales Scrollen */
    .mod-stundenzettel .fiche,
    .mod-stundenzettel .fichecenter {
        max-width: 100vw;
        overflow-x: hidden;
        padding: 0 5px;
    }

    /* Tabellen: Horizontal scrollbar wenn nötig */
    .mod-stundenzettel .div-table-responsive-no-min {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -5px;
        padding: 0 5px;
    }

    /* Tabellen kompakter */
    .mod-stundenzettel table.noborder {
        font-size: 13px;
    }

    .mod-stundenzettel table.noborder th,
    .mod-stundenzettel table.noborder td {
        padding: 6px 4px !important;
    }

    /* Spalten mit fester Breite reduzieren */
    .mod-stundenzettel table.noborder th[style*="width:80px"],
    .mod-stundenzettel table.noborder td[style*="width:80px"] {
        width: 60px !important;
    }

    .mod-stundenzettel table.noborder th[style*="width:200px"],
    .mod-stundenzettel table.noborder td[style*="width:200px"] {
        width: 120px !important;
    }

    .mod-stundenzettel table.noborder th[style*="width:100px"],
    .mod-stundenzettel table.noborder td[style*="width:100px"] {
        width: 70px !important;
    }

    /* Buttons: 40px -> 35px */
    .mod-stundenzettel table.noborder th[style*="width:40px"],
    .mod-stundenzettel table.noborder td[style*="width:40px"] {
        width: 35px !important;
        padding: 4px 2px !important;
    }

    /* ============================================
       EINGABEFELDER - Touch-optimiert
       ============================================ */

    /* Alle Inputs: Mindestgröße für Touch */
    .mod-stundenzettel input[type="text"],
    .mod-stundenzettel input[type="number"],
    .mod-stundenzettel input[type="time"],
    .mod-stundenzettel select,
    .mod-stundenzettel textarea {
        font-size: 16px !important; /* Verhindert iOS Zoom */
        min-height: 40px;
    }

    /* Number-Inputs kompakter aber touchbar */
    .mod-stundenzettel input[type="number"] {
        width: 60px !important;
        padding: 8px 4px !important;
    }

    /* Zeit-Inputs */
    .mod-stundenzettel input[type="time"] {
        width: 80px !important;
        padding: 8px !important;
    }

    /* Textarea volle Breite */
    .mod-stundenzettel textarea {
        width: 100% !important;
        min-height: 60px;
        box-sizing: border-box;
    }

    /* Select-Felder */
    .mod-stundenzettel select {
        max-width: 100%;
    }

    .mod-stundenzettel select.minwidth200,
    .mod-stundenzettel select.minwidth300 {
        min-width: 150px !important;
        max-width: 100% !important;
    }

    /* ============================================
       ICONS/BUTTONS - Touch-Targets
       ============================================ */

    /* Icons größer und mit Padding für Touch */
    .mod-stundenzettel td .fas,
    .mod-stundenzettel td .far {
        font-size: 1.3em;
        padding: 8px;
        min-width: 35px;
        min-height: 35px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Links in Zellen: größerer Touch-Bereich */
    .mod-stundenzettel td a {
        display: inline-block;
        padding: 4px;
    }

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

    /* Tabs umbrechen wenn nötig */
    .mod-stundenzettel .tabs {
        flex-wrap: wrap;
    }

    /* ============================================
       SECTION-TITEL
       ============================================ */
    .mod-stundenzettel h3 {
        font-size: 16px;
        padding: 8px 10px;
        margin: 12px 0 8px 0;
    }

    /* Abschnitts-Header in Tabellen */
    .mod-stundenzettel tr.liste_titre th[colspan] {
        font-size: 14px;
        padding: 10px 8px !important;
    }

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

    .mod-stundenzettel .tabsAction a.butAction,
    .mod-stundenzettel .tabsAction a.butActionDelete {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
        padding: 12px 8px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* ============================================
       BANNER/HEADER - Kompakter
       ============================================ */
    .mod-stundenzettel .arearef {
        padding: 8px !important;
    }

    .mod-stundenzettel .refid {
        font-size: 14px;
    }

    /* ============================================
       SELECT2 - Touch-optimiert
       ============================================ */
    .mod-stundenzettel .select2-container {
        max-width: 100% !important;
    }

    .mod-stundenzettel .select2-selection {
        min-height: 40px !important;
    }

    .mod-stundenzettel .select2-selection__rendered {
        line-height: 38px !important;
    }

    /* ============================================
       BADGES - Lesbar
       ============================================ */
    .mod-stundenzettel .badge {
        font-size: 11px !important;
        padding: 3px 6px !important;
        white-space: nowrap;
    }

    /* ============================================
       PRODUKTNAME - Umbrechen erlauben
       ============================================ */
    .mod-stundenzettel td a[href*="product/card"] {
        word-break: break-word;
    }

    /* ============================================
       FORMS in Tabellen
       ============================================ */
    .mod-stundenzettel tr.oddeven form {
        display: contents;
    }

    /* Freitext-Input unter Produkt-Select */
    .mod-stundenzettel td small.opacitymedium {
        display: block;
        margin-top: 5px;
    }

    /* ============================================
       SUMMENZEILE
       ============================================ */
    .mod-stundenzettel tr.liste_total td {
        font-size: 13px;
        padding: 8px 4px !important;
    }
}

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

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

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

    /* Tabellen noch kompakter */
    .mod-stundenzettel table.noborder {
        font-size: 12px;
    }

    .mod-stundenzettel table.noborder th,
    .mod-stundenzettel table.noborder td {
        padding: 4px 2px !important;
    }

    /* Verstecke weniger wichtige Spalten */
    .mod-stundenzettel table.noborder th:nth-child(n+6),
    .mod-stundenzettel table.noborder td:nth-child(n+6) {
        /* Optional: display: none; */
    }
}

/* ============================================
   TOUCH-FEEDBACK
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Aktives Element visuell hervorheben */
    .mod-stundenzettel a:active,
    .mod-stundenzettel button:active {
        opacity: 0.7;
    }

    /* Icons beim Tippen größer */
    .mod-stundenzettel td .fas:active,
    .mod-stundenzettel td .far:active {
        transform: scale(1.2);
    }
}