/*  responsive.css
    ---------------------------------------------------------------------------
    Enthält ausschließlich die breitenabhängigen Überschreibungen. Wird in
    index.html als letztes Stylesheet geladen, damit gleich spezifische Regeln
    ohne !important gewinnen.

    Die Basisregeln stehen weiterhin in styles.css / app.css / login.css; dort
    liegen auch die Typo-Skala (:root) und die Flex-Höhenkette, weil das
    unbedingte Korrekturen sind und keine breitenabhängigen.

    Breakpoints:
      <= 1024px   kompakt (Tablet): Spalten werden flexibel
      <=  767px   Smartphone: Hamburger-Menü, Listen als Karten
      (hover)     Zeigergeräte
    --------------------------------------------------------------------------- */


/* ===========================================================================
   Der Hamburger-Button existiert nur auf schmalen Displays
   =========================================================================== */

.head_burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.head_burger span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: lightgray;
    border-radius: 1px;
}

.maincontroller.nav_open .head_burger span {
    background-color: red;
}


/* ===========================================================================
   Touch-Bedienung
   =========================================================================== */

@media (hover: none) {

    html {
        -webkit-tap-highlight-color: rgba(255, 0, 0, 0.15);
    }

    /* unterdrückt die 300ms-Verzögerung bzw. den Doppeltipp-Zoom */
    .menu_item,
    .button,
    .button_go,
    .login_go,
    .list_line,
    .list_icon_container,
    .checkitem,
    .head_dropitem,
    .user_dropitem,
    .tix_inputtype,
    .app_tix_send,
    .app_user_send,
    .head_burger,
    .profil_settingselement {
        touch-action: manipulation;
    }

    /*  Auf Mobilgeräten gibt es kein Drag & Drop - der Hinweistext dazu
        entfällt, die Dateiauswahl bekommt die volle Breite. */
    .app_tix_upload > div:first-child {
        display: none;
    }

    .app_tix_upload > div:last-child,
    .app_tix_upload label.button {
        width: 100%;
    }
}


/* ===========================================================================
   Trefferflächen
   Bewusst an "hover: none" gekoppelt und nicht nur an die Breite: ein Tablet
   im Hochformat ist 768px breit, fällt also aus dem Smartphone-Breakpoint
   heraus, ist aber trotzdem ein Touch-Gerät.
   =========================================================================== */

@media (hover: none), (max-width: 767px) {

    .menu_item {
        display: flex;
        align-items: center;
        min-height: var(--tap);
    }

    .button,
    .login_go,
    .button_go,
    .app_tix_send,
    .app_user_send,
    .tix_inputtype {
        min-height: 2.75rem;
    }

    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .list_line {
        min-height: 3.5rem;
    }

    .rg_check {
        width: var(--tap);
        min-height: var(--tap);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 var(--tap);
    }

    .checkitem {
        width: 1.375rem;
        height: 1.375rem;
    }

    .list_icon_container,
    .doc_cmd {
        width: var(--tap);
        min-width: var(--tap);
        min-height: var(--tap);
        align-items: center;
        flex: 0 0 var(--tap);
    }

    .list_cmd_icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .profil_settingsright {
        min-width: var(--tap);
        min-height: var(--tap);
    }
}


/* ===========================================================================
   Kompakt (Tablet und kleine Notebooks)
   Spalten geben ihre festen vw-Breiten auf, damit lange Titel den Rest der
   Zeile nicht aus dem Bild schieben.
   =========================================================================== */

@media (max-width: 1024px) {

    /*  Sobald die Spalten ihre festen vw-Breiten verlieren, muss der Abstand
        über gap kommen - sonst kleben Nummer, Datum und Titel aneinander. */
    .list_left,
    .list_right {
        min-width: 0;
        column-gap: 1rem;
    }

    .head_logo {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .tix_title,
    .doc_titel,
    .user_name,
    .user_email {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rg_datum, .rg_nr, .rg_sum,
    .tix_nr, .tix_datum, .tix_status, .tix_masterbadge,
    .doc_datum, .doc_akt_datum, .user_status {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .rg_sum, .tix_status, .user_status {
        padding-inline: 0.75rem;
    }

    .list_spacer_5 {
        width: 1rem;
    }

    .tix_head_title {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .profil_settingselement {
        width: 100%;
    }
}


/* ===========================================================================
   Smartphone
   =========================================================================== */

@media (max-width: 767px) {

    /* ---------- Kopfzeile und Hamburger-Menü ----------------------------- */

    /*  Kopfzeile und Menü-Overlay sind dasselbe Element: die Kopfzeile darf
        umbrechen, Hauptmenü und Benutzer-Dropdown legen sich als volle Zeilen
        darunter. Dadurch braucht es weder doppeltes Markup noch fixierte
        Positionierung mit von Hand gerechneten Offsets. */
    .headline {
        flex-wrap: wrap;
        align-items: center;
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
        padding-top: calc(0.25rem + env(safe-area-inset-top));
        padding-bottom: 0.25rem;
    }

    .head_logo {
        order: 1;
        flex: 1 1 auto;
        width: auto;
        white-space: nowrap;
        font-size: var(--fs-base);
    }

    .head_burger {
        order: 2;
        display: flex;
        flex: 0 0 auto;
    }

    .head_menu {
        order: 3;
        display: none;
    }

    /*  .head_right bleibt im Dokument, weil #dropdown_m sein Kind ist -
        nur Avatar und Benutzername werden ausgeblendet. */
    .head_right {
        order: 4;
        flex: 0 0 auto;
        padding: 0;
    }

    .head_icon,
    .head_username {
        display: none;
    }

    .maincontroller.nav_open .headline {
        max-height: 85dvh;
        overflow-y: auto;
        padding-bottom: 0.75rem;
    }

    .maincontroller.nav_open .head_menu {
        display: flex;
        flex-direction: column;
        flex: 1 0 100%;
        width: 100%;
        margin-top: 0.5rem;
        border-top: 1px solid rgb(80, 80, 80);
        padding-top: 0.5rem;
    }

    .maincontroller.nav_open .head_right {
        flex: 1 0 100%;
        width: 100%;
    }

    .head_menu span {
        margin-inline: 0;
    }

    /*  Bewusst auf .head_menu eingeschränkt: .head_right trägt ebenfalls die
        Klasse menu_item und würde sonst auf volle Breite umbrechen. */
    .head_menu .menu_item {
        display: flex;
        align-items: center;
        min-height: var(--tap);
        width: 100%;
        padding-inline: 0.75rem;
        padding-block: 0;
        border-bottom: none;
    }

    .head_menu .active_item {
        border-radius: 0.5rem;
    }

    /*  Das Dropdown wird Teil des Overlays statt eines absolut positionierten
        Kastens mit fest gerechnetem Offset. */
    .head_dropdown {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
        border-top: 1px solid rgb(80, 80, 80);
        padding-top: 0.5rem;
        background-color: transparent;
    }

    .head_dropitem {
        width: 100%;
        height: auto;
        min-height: var(--tap);
        padding-inline: 0.25rem;
    }

    .dropdown_icon,
    .user_dropdown_icon {
        margin-left: 0.5rem;
        margin-right: 0.75rem;
    }


    /* ---------- Grundraster --------------------------------------------- */

    .app {
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
        padding-top: 1rem;
        /* Platz für die fest am unteren Rand liegende Laufschrift */
        padding-bottom: calc(3rem + env(safe-area-inset-bottom));
    }

    /* ---------- Suchzeile ------------------------------------------------ */

    .app_search_above {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .app_suche {
        flex: 1 0 100%;
        height: var(--tap);
        border-radius: calc(var(--tap) / 2);
    }

    .app_cmd {
        flex: 1 0 100%;
        width: 100%;
        justify-content: flex-start;
        height: auto;
    }

    /* in der Rechnungsliste ist der Bereich leer, solange nichts markiert ist */
    .app_cmd:empty {
        display: none;
    }

    .search_icon,
    .cancel_icon {
        margin-inline: 0.75rem;
    }


    /* ---------- Listen als Karten-Stapel --------------------------------- */

    /*  Alle fünf Listen (Rechnungen, Tickets, Dokumente, Benutzer, Status)
        benutzen dieselben Bausteine .list_head / .list_line / .list_left /
        .list_right. Deshalb genügen hier CSS-Regeln - die innerHTML
        erzeugenden app_*.js bleiben unverändert. */

    .list_head {
        display: none;
    }

    /*  Ausnahme: in der Rechnungsliste steckt im Kopf die "alles auswählen"-
        Checkbox (#rg_check_all). Der Kopf bleibt deshalb als schmale
        Auswahlzeile stehen, die Spaltentitel entfallen. */
    #app_rg_2 > .list_head {
        display: flex;
        min-height: var(--tap);
        height: auto;
    }

    #app_rg_2 > .list_head .rg_nr,
    #app_rg_2 > .list_head .rg_sum,
    #app_rg_2 > .list_head .list_icon_container {
        display: none;
    }

    #app_rg_2 > .list_head .rg_datum {
        font-size: 0;
    }

    #app_rg_2 > .list_head .rg_datum::after {
        content: "alle auswählen";
        font-size: 1rem;
    }

    /*  Grid statt Flex: so bleibt die rechte Spalte (Status, Aktionsicon)
        neben dem umbrechenden Titel stehen, statt auf eine eigene Zeile zu
        rutschen. */
    .list_line,
    #app_rg_2 > .list_head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 0.5rem;
        height: auto;
        min-height: 3.5rem;
        padding-block: 0.625rem;
    }

    .list_left {
        flex-wrap: wrap;
        align-items: center;
        min-width: 0;
        column-gap: 0.5rem;
        row-gap: 0.125rem;
        overflow-wrap: anywhere;
    }

    .list_right {
        justify-content: flex-end;
        align-items: center;
        gap: 0.25rem;
    }

    /* feste vw-Spaltenbreiten aufheben */
    .rg_datum, .rg_nr, .rg_sum,
    .tix_nr, .tix_datum, .tix_title, .tix_status, .tix_masterbadge,
    .doc_datum, .doc_akt_datum, .doc_titel, .doc_cmd,
    .user_name, .user_email, .user_status,
    .bubble {
        width: auto;
    }

    /*  Titel bekommt eine eigene, hervorgehobene erste Zeile; Nummer, Datum
        und Betrag rutschen als Sekundärzeile darunter. */
    .tix_title,
    .doc_titel,
    .user_name {
        flex: 1 0 100%;
        order: -1;
        font-weight: bold;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .tix_nr, .tix_datum,
    .rg_datum, .rg_nr,
    .doc_datum, .doc_akt_datum,
    .user_email {
        font-size: 0.875em;
        color: rgb(150, 150, 150);
        white-space: normal;
    }

    .rg_sum {
        padding-inline: 0;
        font-weight: bold;
        white-space: nowrap;
    }

    .list_spacer_5 {
        display: none;
    }

    /*  Im Sammelticket-Fall ist das Badge in der Detailansicht ohnehin
        sichtbar; in der schmalen Zeile kostet es nur Platz. */
    .tix_masterbadge {
        display: none;
    }

    .tix_indicator {
        width: 0.25rem;
        height: 1.5rem;
        min-height: 1.5rem;
        margin-right: 0.5rem;
        border-radius: 0.25rem;
        flex: 0 0 auto;
    }

    /* schmaler halten, damit dem Titel links mehr Breite bleibt */
    .tix_status,
    .user_status {
        min-height: 2rem;
        padding-inline: 0.625rem;
        align-items: center;
        border-radius: 1rem;
        white-space: nowrap;
        font-size: 0.875em;
    }

    .list_title {
        margin-top: 0.5rem;
    }

    .app_notfound {
        height: auto;
        min-height: 8rem;
        padding: 1rem;
        text-align: center;
    }


    /* ---------- Ticket-Detail und Verlauf -------------------------------- */

    .app_tix_detail_head {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /*  Titel zuerst und über die volle Breite, darunter die Schaltflächen. */
    .tix_head_title {
        flex: 1 0 100%;
        width: auto;
        order: -1;
        text-align: left;
        font-size: var(--fs-base);
        font-weight: bold;
    }

    /*  Nebeneinander passen Zeitstempel und Sprechblase nicht mehr - der
        Stempel bekommt eine eigene Zeile, die Blase bleibt links bzw. rechts
        ausgerichtet. */
    .app_tix_row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .app_tix_stamp {
        flex: 1 0 100%;
        font-size: 0.75rem;
    }

    .app_tix_bubble {
        width: 85%;
        padding: 0.625rem;
        margin-bottom: 0.75rem;
        border-radius: 0.75rem;
        overflow-wrap: anywhere;
    }

    .tix_bubble_customer {
        margin-left: auto;
    }

    .tix_bubble_antilo {
        margin-right: auto;
    }

    /*  Eingabefeld über den Senden-Button statt daneben. */
    .app_tix_enter {
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.625rem;
        border-radius: 0.75rem;
    }

    .app_tix_input {
        width: 100%;
        height: auto;
        min-height: 4.5rem;
    }

    .app_tix_send,
    .app_user_send {
        width: 100%;
        min-height: 2.75rem;
    }

    .app_tix_upload {
        height: auto;
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem;
        text-align: center;
        border-radius: 0.75rem;
    }

    .app_tix_hinweis {
        height: auto;
        min-height: 0;
        font-size: var(--fs-base);
        padding: 0.75rem;
        margin-top: 1rem;
        border-radius: 0.75rem;
    }

    .tix_inputtype_select {
        gap: 0.375rem;
    }

    .tix_inputtype {
        flex: 1 1 0;
        justify-content: center;
        min-height: 2.75rem;
        margin-left: 0;
        padding-inline: 0.5rem;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        text-align: center;
    }


    /* ---------- Assistent "neues Ticket" --------------------------------- */

    .new_tix_content {
        width: 100%;
        margin: 0;
        margin-top: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    .new_tix_class_line {
        height: auto;
        min-height: 3.5rem;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        padding-block: 0.625rem;
    }

    /*  Die Zeile enthält zwei Zwischencontainer (im JS als #class_left /
        #class_right erzeugt), erst darin liegen Text und Schaltfläche.
        Deshalb hier über die Position statt über die Klassen ansprechen. */
    .new_tix_class_line > div:first-child {
        flex: 1 0 100%;
        min-width: 0;
    }

    .new_tix_class_line > div:last-child {
        margin-left: auto;
    }

    .class_txt {
        margin-left: 0;
        font-size: var(--fs-base);
    }

    .class_btn {
        margin-right: 0;
    }

    .tix_i_lang {
        height: 10rem;
    }


    /* ---------- Benutzer anlegen und bearbeiten -------------------------- */

    .new_user_content {
        width: 100%;
        margin: 0;
        margin-top: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    /* Vor- und Nachname untereinander statt nebeneinander */
    .line_dual_input {
        flex-wrap: wrap;
        width: 100%;
    }

    .new_user_i_kurz,
    .new_user_i_lang {
        width: 100%;
    }

    .button_go {
        width: 100%;
        min-height: 2.75rem;
        font-size: var(--fs-base);
    }


    /* ---------- Profil --------------------------------------------------- */

    .profil_settingselement {
        height: auto;
        min-height: 3.5rem;
        width: 100%;
        margin-left: 0;
        padding-block: 0.5rem;
        align-items: center;
    }

    /*  Bezeichnung als kleine Zeile über dem Wert statt daneben. */
    .profil_settingsleft {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 0.125rem;
        min-width: 0;
    }

    .profil_settingsname {
        flex: 0 0 auto;
        width: 100%;
        font-size: 0.875em;
        color: rgb(150, 150, 150);
    }

    .profil_settingsvalue {
        flex: 0 0 auto;
        width: 100%;
    }

    .profil_editicon {
        width: 1.5rem;
    }

    .p_status {
        width: auto;
        min-width: 7rem;
        min-height: 2.25rem;
        padding-inline: 0.75rem;
        align-items: center;
        border-radius: 1.25rem;
    }


    /* ---------- antilo Status -------------------------------------------- */

    .bubble {
        width: auto;
        min-width: 6rem;
        height: auto;
        min-height: 2rem;
        margin-right: 0;
        padding: 0.25rem 0.75rem;
        border-radius: 1rem;
        text-align: center;
    }


    /* ---------- Login ---------------------------------------------------- */

    .logincontroller {
        justify-content: center;
        padding: 1rem;
    }

    .logindialog {
        width: 100%;
        max-width: none;
        min-height: 0;
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .login_head {
        min-height: 0;
        margin-bottom: 1rem;
    }

    .login_enter,
    #login_wait {
        height: auto;
        padding-block: 0.75rem;
    }

    .login_btns {
        gap: 0.75rem;
    }

    .login_go {
        flex: 1 1 0;
        width: auto;
        max-width: 50%;
    }


    /* ---------- Dialoge -------------------------------------------------- */

    .edit_dialog {
        width: calc(100% - 1.5rem);
        min-height: 0;
        padding: 1.25rem;
        border-radius: 1rem;
    }

    .dlg_frame {
        gap: 1rem;
    }

    .dlg_btns {
        flex-wrap: wrap;
    }

    .dlg_btns .login_go {
        flex: 1 1 8rem;
        max-width: none;
    }


    /* ---------- Schaltflächen und Eingabefelder -------------------------- */

    .button {
        padding-inline: 0.875rem;
    }

    /*  Unter 16px zoomt iOS Safari beim Fokussieren in das Feld hinein. */
    input,
    textarea,
    select,
    .cscn_input,
    .search_input,
    .app_tix_input,
    .tix_i_kurz,
    .tix_i_lang {
        font-size: 16px;
    }
}