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

/* ============================================
   DESKTOP: Mobile-Elemente ausblenden
   ============================================ */
.mod-stundenzettel .mobile-description-row {
    display: none;
}

.mod-stundenzettel .mobile-inline-desc {
    display: none;
}

/* ============================================
   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 kompakter */
    .mod-stundenzettel input[type="time"] {
        width: 70px !important;
        padding: 6px 4px !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: 120px !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.2em;
        padding: 6px;
        min-width: 32px;
        min-height: 32px;
        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 und horizontal scrollbar
       ============================================ */
    .mod-stundenzettel .tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
    }

    .mod-stundenzettel .tabsElem a {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

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

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

    /* ============================================
       ACTION-BUTTONS (Freigeben/Löschen)
       ============================================ */
    .mod-stundenzettel .tabsAction {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 5px;
        position: sticky;
        bottom: 0;
        background: var(--colorbackbody, inherit);
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    }

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

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

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

    /* Banner-Tabelle kompakter */
    .mod-stundenzettel .refidno {
        font-size: 12px;
    }

    /* ============================================
       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;
        font-size: 14px !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;
        font-weight: bold;
    }

    /* ============================================
       LEISTUNGEN TABELLE - Spalten optimieren
       ============================================ */
    /* Beschreibungs-Spalte kompakter (Wörter umbrechen) */
    .mod-stundenzettel table.noborder td:nth-child(6) {
        max-width: 100px;
        word-break: break-word;
        font-size: 12px;
    }

    /* Textarea in Edit-Mode kompakter (aber nicht in mobile-description-row) */
    .mod-stundenzettel tr.oddeven:not(.mobile-description-row) textarea {
        min-height: 50px;
        width: 150px !important;
    }

    /* ============================================
       MOBILE FORMULARE - Separate Beschreibungszeile
       ============================================ */
    /* Mobile-Zeilen anzeigen */
    .mod-stundenzettel .mobile-description-row {
        display: table-row;
        background: var(--colorbacklineimpair2, inherit) !important;
    }

    .mod-stundenzettel .mobile-description-row td {
        padding: 8px !important;
        border-top: none !important;
    }

    .mod-stundenzettel .mobile-description-row input,
    .mod-stundenzettel .mobile-description-row textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Desktop-Spalten auf Mobile ausblenden */
    .mod-stundenzettel .mobile-hide {
        display: none !important;
    }

    /* ============================================
       INLINE BESCHREIBUNG (unter Produktname)
       ============================================ */
    .mod-stundenzettel .mobile-inline-desc {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.3;
        opacity: 0.7;
    }
}

/* ============================================
   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);
    }
}

/* ============================================
   STUNDENZETTEL HINTERGRUNDFARBEN (Light Mode)
   ============================================ */
.mod-stundenzettel .stz-info-box {
    background-color: var(--colorbacklineimpair1, #fff);
}
.mod-stundenzettel .stz-warning-box {
    background-color: #fff8e1;
    border-left: 4px solid #ffc107;
}
.mod-stundenzettel .stz-section-header {
    background-color: var(--colorbacklineimpair1, #f8f8f8);
}
.mod-stundenzettel .stz-subtable-bg {
    background-color: var(--colorbacklineimpair2, #fafafa);
}
.mod-stundenzettel .stz-subtable-header {
    background-color: var(--colorbacktitle1, #f0f0f0);
}
.mod-stundenzettel .stz-mehraufwand-header {
    background-color: #e8f5e9;
}
.mod-stundenzettel .stz-current-stz {
    background-color: #e8f4fc;
}

/* ============================================
   DARK MODE SUPPORT
   Greift bei:
   1. OS/Browser Dark Mode (prefers-color-scheme: dark)
      → Funktioniert mit Dark Reader + Handy Dark Mode
   2. Dolibarr Dark Theme (body.theme-eldy-dark)
   ============================================ */

/* --- OS/Browser Dark Mode (Dark Reader, Handy Dark Mode) --- */
@media (prefers-color-scheme: dark) {
    .mod-stundenzettel .liste_titre th {
        border-bottom: 2px solid rgba(255,255,255,0.15) !important;
    }

    .mod-stundenzettel .tabsAction {
        background: var(--colorbackbody, #1e1e1e);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
    }

    .mod-stundenzettel .mobile-description-row {
        background: var(--colorbacklineimpair2, #2d2d2d) !important;
    }

    .mod-stundenzettel .stz-info-box {
        background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
    }

    .mod-stundenzettel .stz-warning-box {
        background-color: var(--colorbacklineimpair1, #3a3520) !important;
        border-left-color: #ffc107;
    }

    .mod-stundenzettel .stz-section-header {
        background-color: var(--colorbacktitle1, #333) !important;
    }

    .mod-stundenzettel .stz-subtable-bg {
        background-color: var(--colorbacklineimpair2, #2a2a2a) !important;
    }

    .mod-stundenzettel .stz-subtable-header {
        background-color: var(--colorbacktitle1, #333) !important;
    }

    .mod-stundenzettel .stz-mehraufwand-header {
        background-color: var(--colorbacklineimpair1, #1e3320) !important;
    }

    .mod-stundenzettel .stz-current-stz {
        background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
    }

    .mod-stundenzettel .info {
        background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
    }
}

/* --- Dolibarr Dark Theme (Fallback) --- */
body.theme-eldy-dark.mod-stundenzettel .liste_titre th {
    border-bottom: 2px solid rgba(255,255,255,0.15) !important;
}

body.theme-eldy-dark.mod-stundenzettel .tabsAction {
    background: var(--colorbackbody, #1e1e1e);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
}

body.theme-eldy-dark.mod-stundenzettel .mobile-description-row {
    background: var(--colorbacklineimpair2, #2d2d2d) !important;
}

body.theme-eldy-dark.mod-stundenzettel .stz-info-box {
    background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
}

body.theme-eldy-dark.mod-stundenzettel .stz-warning-box {
    background-color: var(--colorbacklineimpair1, #3a3520) !important;
    border-left-color: #ffc107;
}

body.theme-eldy-dark.mod-stundenzettel .stz-section-header {
    background-color: var(--colorbacktitle1, #333) !important;
}

body.theme-eldy-dark.mod-stundenzettel .stz-subtable-bg {
    background-color: var(--colorbacklineimpair2, #2a2a2a) !important;
}

body.theme-eldy-dark.mod-stundenzettel .stz-subtable-header {
    background-color: var(--colorbacktitle1, #333) !important;
}

body.theme-eldy-dark.mod-stundenzettel .stz-mehraufwand-header {
    background-color: var(--colorbacklineimpair1, #1e3320) !important;
}

body.theme-eldy-dark.mod-stundenzettel .stz-current-stz {
    background-color: var(--colorbacklineimpair2, #1e2e3a) !important;
}

body.theme-eldy-dark.mod-stundenzettel .info {
    background-color: var(--colorbacklineimpair1, #2d2d2d) !important;
}