/* ============================================================================
   Globaler Table-Overflow-Layer
   Sorgt dafür, dass Tabellen in der App nie rechts abgeschnitten werden.
   Alle bekannten Wrapper-Klassen erlauben horizontales Scrollen; Tabellen
   selbst bekommen min-width: max-content, damit der Scroll greift.
   Wird global via /css/v2/index.css geladen.
   ============================================================================ */

/* Alle Table-Wrapper-Varianten sind horizontal scrollbar ------------------- */
/* WICHTIG: html-Prefix für höhere Spezifität (0,1,1) — base-mobile.css setzt
   `display: table !important` mit (0,1,0) und gewinnt sonst durch Source Order. */
html .table-container,
html .table-wrapper,
html .table-responsive,
html .users-table-wrapper,
html .batch-table-wrapper,
html .entries-table-wrapper,
html .data-table-wrapper,
html .invoices-table-container,
html .offers-table-container,
html .customers-table-container,
html .pending-list-container,
html .ta-table-wrap {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
}

/* Standalone-Tabellen ohne dedizierten Wrapper (admin-tickets, admin-support,
   tax-advisor-portal, marketing comparison): über JS wird zur Laufzeit ein
   scrollbarer Wrapper eingefügt (siehe public/js/table-overflow-autowrap.js).
   Als CSS-Fallback (falls JS aus) bekommen sie immerhin eine max-width-Grenze. */
.tickets-table,
.ta-table,
.comparison-table {
    max-width: 100%;
}

/* Tabellen innerhalb eines Wrappers: Min-Width sorgt dafür, dass Spalten
   ihre natürliche Breite behalten und der Wrapper horizontal scrollt
   statt die Spalten zu quetschen. */
.table-container > table,
.table-wrapper > table,
.table-responsive > table,
.users-table-wrapper > table,
.batch-table-wrapper > table,
.entries-table-wrapper > table,
.data-table-wrapper > table {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
}

/* Flex-Children dürfen unter ihren min-content schrumpfen — sonst bläst ein
   <table min-width:max-content> die ganze Layout-Kette bis zum <main> auf
   und die Seite bekommt horizontalen Scroll. Damit der Wrapper selbst scrollt,
   müssen alle Container in der Kette `min-width: 0` haben. */
.app-shell__main,
.app-shell__main > .main-content,
main.main-content,
.content-container,
#main-content-container {
    min-width: 0;
    max-width: 100%;
}

/* Tabellen-Wrapper dürfen niemals breiter als ihr Parent werden */
.table-container,
.table-wrapper,
.table-responsive,
.users-table-wrapper,
.batch-table-wrapper,
.entries-table-wrapper,
.data-table-wrapper,
.pending-list-container,
.ta-table-wrap {
    min-width: 0;
    width: 100%;
}

/* Tabellen OHNE Wrapper, direkt im Main-Content: bekommen einen impliziten
   Scroll-Wrapper via display:block. Bricht das Tabellen-Layout nicht, weil
   thead/tbody/tr/td die Default-Anzeige behalten. */
main .data-table:not(.table-container *):not(.table-wrapper *):not(.table-responsive *):not(.users-table-wrapper *):not(.entries-table-wrapper *) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Sicherheitsnetz: kein <table> bricht aus dem Viewport aus -------------- */
main table {
    max-width: 100%;
}

/* Dezente Scrollbars in den Wrappern (WebKit) */
.table-container::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.users-table-wrapper::-webkit-scrollbar,
.batch-table-wrapper::-webkit-scrollbar,
.entries-table-wrapper::-webkit-scrollbar,
.data-table-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-container::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.users-table-wrapper::-webkit-scrollbar-thumb,
.batch-table-wrapper::-webkit-scrollbar-thumb,
.entries-table-wrapper::-webkit-scrollbar-thumb,
.data-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.users-table-wrapper::-webkit-scrollbar-thumb:hover,
.batch-table-wrapper::-webkit-scrollbar-thumb:hover,
.entries-table-wrapper::-webkit-scrollbar-thumb:hover,
.data-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.6);
}

[data-theme="dark"] .table-container::-webkit-scrollbar-thumb,
[data-theme="dark"] .table-wrapper::-webkit-scrollbar-thumb,
[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb,
[data-theme="dark"] .users-table-wrapper::-webkit-scrollbar-thumb,
[data-theme="dark"] .batch-table-wrapper::-webkit-scrollbar-thumb,
[data-theme="dark"] .entries-table-wrapper::-webkit-scrollbar-thumb,
[data-theme="dark"] .data-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
}

/* Visueller Hinweis "noch mehr Spalten rechts" über fadenden Schatten:
   Schatten erscheint nur, wenn die Tabelle horizontal überläuft.
   Browser-Support: Chrome/Edge/Safari (background-attachment: local). */
.table-container,
.table-wrapper,
.table-responsive,
.users-table-wrapper,
.batch-table-wrapper,
.entries-table-wrapper,
.data-table-wrapper {
    background-image:
        linear-gradient(to right, var(--surface, #fff) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface, #fff) 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.12), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.12), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

[data-theme="dark"] .table-container,
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .table-responsive,
[data-theme="dark"] .users-table-wrapper,
[data-theme="dark"] .batch-table-wrapper,
[data-theme="dark"] .entries-table-wrapper,
[data-theme="dark"] .data-table-wrapper {
    background-image:
        linear-gradient(to right, var(--surface, #0f172a) 30%, rgba(15, 23, 42, 0)),
        linear-gradient(to right, rgba(15, 23, 42, 0), var(--surface, #0f172a) 70%) 100% 0,
        radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}