/*
 * Tabellen auf Telefon und Tablet — systemweit.
 *
 * Firma: 4Unit Systems Integration GmbH — Kommerzielle Nutzung nur mit gültiger Lizenz.
 *
 * WARUM HIER UND NICHT IM ADMIN-STYLESHEET (27.09.2026)
 *
 * Die Regeln standen in admin-layout.css und galten damit nur für die Verwaltung. Eine
 * Tabelle ist aber auf jedem kleinen Bildschirm unlesbar — im Partnerportal genauso. Ein
 * Betrieb sieht seine Zahlen meist auf dem Telefon.
 *
 * Unterhalb von 768 px wird aus jeder Zeile eine Karte: Feldname links, Wert rechts,
 * untereinander. Die Feldnamen kommen aus dem <thead> und werden von
 * js/common/tabellen-mobil.js als data-label auf die Zellen übertragen.
 *
 * Ausnahme: Tabellen mit data-no-cards behalten die klassische Ansicht — für Fälle, in denen
 * das Nebeneinander die Aussage trägt.
 */

@media (max-width: 767.98px) {

    table.mobile-cards {
        display: block;
        width: 100%;
        border-collapse: collapse;
        white-space: normal;      /* hebt das nowrap der Scroll-Variante auf */
        overflow: visible !important;
    }

    /* Die Kopfzeile entfaellt — ihre Texte stehen jetzt in jeder Zelle */
    table.mobile-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    table.mobile-cards tbody,
    table.mobile-cards tr,
    table.mobile-cards td {
        display: block;
        width: 100%;
    }

    /* =====================================================================
       Eine Zeile = eine Karte
       ===================================================================== */

    /* ZUERST DAS STREIFENMUSTER AUSSCHALTEN.
       table-striped faerbt tbody tr. Nebeneinander ist das eine Zeile, in der
       Kartenansicht die ganze Karte -- und aus Weiss mit Trennlinien wird ein
       grauer Kasten. Genau das hat der Betreiber als "beschissene Mobilansicht"
       fotografiert, und er hatte recht. */
    table.mobile-cards.table-striped > tbody > tr > td,
    table.mobile-cards.table-striped > tbody > tr:nth-of-type(odd) > td,
    table.mobile-cards.table-hover > tbody > tr:hover > td {
        --bs-table-accent-bg: transparent;
        --bs-table-bg-type: transparent;
        background-color: transparent;
        box-shadow: none;
    }

    table.mobile-cards tbody tr {
        display: block;
        margin: 0 0 0.875rem 0;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 14px;
        background: #fff;
        padding: 0.875rem 1rem 0.75rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                    0 4px 12px rgba(15, 23, 42, 0.06);
    }

    table.mobile-cards tbody tr:last-child {
        margin-bottom: 0;
    }

    /* ---------------------------------------------------------------------
       Das erste Feld ist die Ueberschrift der Karte.

       Wonach man sucht, steht oben und gross -- die Rechnungsnummer, der Name,
       die Bestellnummer. Alles gleich zu gewichten heisst, dass man jede Karte
       lesen muss, statt sie zu ueberfliegen.
       --------------------------------------------------------------------- */
    table.mobile-cards tbody td:first-child {
        display: block;
        padding: 0 0 0.5rem 0;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(15, 23, 42, 0.07);
        font-size: 1.0625rem;
        font-weight: 650;
        line-height: 1.3;
        color: #0f172a;
        text-align: left;
        letter-spacing: -0.01em;
    }

    /* Der Feldname der Ueberschrift steht darueber, klein und ruhig. */
    table.mobile-cards tbody td:first-child::before {
        display: block;
        flex: none;
        margin-bottom: 0.125rem;
        font-size: 0.6875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #94a3b8;
    }

    /* ---------------------------------------------------------------------
       Die uebrigen Felder: Name links, Wert rechts.
       --------------------------------------------------------------------- */
    table.mobile-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.3125rem 0;
        font-size: 0.9375rem;
        line-height: 1.4;
        border: 0;
        text-align: right;
        color: #0f172a;
        /* Lange Werte (E-Mail, Client-ID, URL) umbrechen statt abschneiden */
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    table.mobile-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: 0.8125rem;
        font-weight: 500;
        text-align: left;
        color: #64748b;
        white-space: normal;
    }

    /* Zahlen rechtsbuendig untereinander -- sonst taenzeln sie je nach Laenge. */
    table.mobile-cards tbody td {
        font-variant-numeric: tabular-nums;
    }

    /* ---------------------------------------------------------------------
       Die Aktionen: unten, volle Breite, mit Beschriftung.

       Vorher stand dort ein blankes Symbol am rechten Rand -- 24 px gross, ohne
       Wort daneben. Was es tut, musste man erraten, und treffen musste man es
       auch noch. Jetzt sitzt es als eigener Streifen unter der Karte.
       --------------------------------------------------------------------- */
    table.mobile-cards tbody td.karte-aktionen {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: stretch;
        padding: 0.75rem 0 0;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(15, 23, 42, 0.07);
    }

    table.mobile-cards tbody td.karte-aktionen::before {
        content: none;
    }

    table.mobile-cards tbody td.karte-aktionen > * {
        flex: 1 1 auto;
    }

    /* Fingerkuppe, nicht Mauszeiger: 44 px ist das Mass, unter dem man
       danebentippt. */
    table.mobile-cards tbody td.karte-aktionen .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
        font-size: 0.9375rem;
        font-weight: 500;
        border-radius: 10px;
    }

    /* Knopfgruppen bleiben nebeneinander, teilen sich aber die Breite. */
    table.mobile-cards tbody td .btn-group,
    table.mobile-cards tbody td .d-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
        justify-content: stretch;
    }

    table.mobile-cards tbody td .btn-group > .btn,
    table.mobile-cards tbody td .d-flex > .btn {
        flex: 1 1 0;
    }

    /* Das Wort, das tabellen-mobil.js an blanke Symbolknoepfe haengt.
       Am Schreibtisch gibt es den Titel beim Verweilen; auf dem Telefon nicht,
       und ein blankes Zeichen ist dort ein Raetsel. */
    table.mobile-cards tbody td .knopf-wort {
        font-size: 0.9375rem;
    }

    /* Abzeichen duerfen nicht schrumpfen -- "Versendet" ist die Antwort auf
       die Frage, warum eine Rechnung offen ist. */
    table.mobile-cards tbody td .badge {
        font-size: 0.8125rem;
        padding: 0.35em 0.65em;
        border-radius: 8px;
    }

    /* Der Scroll-Kasten wird nicht mehr gebraucht — er wuerde die Karten beschneiden */
    .table-responsive:has(table.mobile-cards) {
        overflow: visible !important;
    }

    /* Leere Felder brauchen keine Zeile — sie machen die Karte nur laenger. */
    table.mobile-cards tbody td.leer {
        display: none;
    }

    /* Jeder Knopf in einer Karte ist eine Daumenflaeche.
       36 px war ein Kompromiss aus der Zeit, als die Knoepfe nebeneinander
       standen. Gemessen wurde danach ein sichtbarer Knopf mit 31 px: Bootstraps
       `btn-sm` unterlaeuft die Vorgabe, weil sein Innenabstand kleiner ist als
       die Mindesthoehe suggeriert. 44 px ist das Mass, unter dem man danebentippt. */
    table.mobile-cards tbody td .btn,
    table.mobile-cards tbody td .btn-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.375rem 0.75rem;
    }

    /* Statistik-Kacheln zweispaltig: einspaltig war das Dashboard 13 Bildschirme lang */
    .admin-content .row > [class*="col-"].stat-col,
    .admin-content .stats-row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ========================================================================
   Das Suchfeld der Finanz-Abschnitte.

   Auf dem Telefon nimmt es die volle Breite (die Zeile darüber steht dann
   untereinander), ab Tablet genügen ihm 14 rem neben dem Titel. Die Breite
   steht hier und nicht als style-Attribut in der Vorlage — CSP.
   ======================================================================== */
@media (min-width: 768px) {
    form.finanz-suche {
        width: auto !important;
    }

    form.finanz-suche input[type="search"] {
        max-width: 14rem;
    }
}

/* ---------------------------------------------------------------------------
   Sortierbare Spaltenkoepfe (28.09.2026)

   Der Kopf bleibt Text, der Pfeil steht daneben. Ohne eigene Farbe wirkt er wie
   ein gewoehnlicher Link und lenkt von den Zahlen ab.
   --------------------------------------------------------------------------- */
.table-sort-link {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.table-sort-link:hover {
    text-decoration: underline;
}

/* Der ungesetzte Pfeil bleibt blass: Er zeigt nur an, DASS sortiert werden kann. */
.table-sort-link .fa-sort {
    opacity: 0.4;
    font-size: 0.85em;
}

.table-sort-link .fa-sort-up,
.table-sort-link .fa-sort-down {
    font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
   Betraege in Tabellen (28.09.2026)

   EINE Klasse fuer alle Betragsspalten. Vorher trugen "Gezahlt" die normale
   Schrift, "Servicegebuehr" und "Provision" die Monospace-Klasse des
   Zeitstempels und die Summe nur fett — drei Schriftbilder in einer Zeile, die
   dasselbe zeigen sollen. Nebeneinander sieht das aus, als gehoerten die Zahlen
   nicht zusammen.

   tabular-nums stellt die Ziffern auf gleiche Breite. Erst dadurch stehen Euro
   und Cent untereinander, und man sieht auf einen Blick, welcher Betrag groesser
   ist — bei Proportionalziffern ist "111,11" schmaler als "999,99".
   --------------------------------------------------------------------------- */
.table-cell-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   SCHMALE SPALTEN: Auswahlkaestchen und Aktionsknopf

   Beide brauchen nur so viel Platz, wie ihr Inhalt einnimmt. Ohne feste Breite
   verteilt der Browser die Tabellenbreite gleichmaessig, und die Kaestchenspalte
   wird so breit wie die Adressspalte -- das verschiebt alles Lesbare nach
   rechts.

   ALS KLASSE, NICHT ALS style-ATTRIBUT: Die Projektregel verbietet inline
   styles, und der Test KundengewinnungSeiteTest.cspKonform setzt sie durch.

   HIER STAND, der Browser verwerfe ein style-Attribut "lautlos". Das ist
   falsch: Die CSP dieses Projekts fuehrt style-src 'self' 'unsafe-inline', ein
   inline-Stil wirkt also. Und wo eine CSP ihn wirklich blockt, meldet der
   Browser die Verletzung in der Konsole. Die falsche Begruendung haette den
   naechsten Leser in die Irre gefuehrt, der einer echten CSP-Verletzung
   nachgeht.

   Der wirkliche Grund ist einfacher: Eine Breite, die im HTML steht, laesst
   sich nicht an einer Stelle aendern.
   --------------------------------------------------------------------------- */
.table-col-auswahl {
    width: 2.5rem;
}

.table-col-aktion {
    width: 5rem;
}