.lc-transactions{ --card:#24141b; --text:#fff; --muted:#e8d7df; --accent:#e5adc6; }

.lc-tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 14px;
}
.lc-tabs button{
  appearance:none; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,#321823,#1f0f17);
  color:#fff; padding:8px 12px; border-radius:10px; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.lc-tabs button.is-active{ outline:0; border-color:rgba(229,173,198,.5); }

.lc-pane{ display:none; }
.lc-pane.is-active{ display:block; }

.lc-table{
  width:100%;
  border-collapse:collapse;

  /* Optik kommt vom Wrapper (einziger Außenrahmen) */
  background: transparent;

  color:var(--muted);

  /* KEIN eigener Rahmen/Radius/Schatten mehr */
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.lc-table thead th{
  text-align:left; color:#fff; font-weight:800; padding:12px 14px;
}

/* Header: nur Hintergrund, kein eigener Rahmen (Außenrahmen macht .lc-tablewrap) */
.lc-table thead{
  background: linear-gradient(145deg,#321823,#1f0f17);

  /* KEIN Rahmen, KEIN eigener Radius nötig */
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* TH selbst bleibt rahmenlos */
.lc-table thead th{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

/* erzwingt exakt die Button-Farbe/Optik auch dann, wenn andere CSS-Regeln drüberbügeln */
.lc-transactions .lc-empty{
  appearance: none !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: linear-gradient(145deg,#321823,#1f0f17) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  text-align: center !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;

  /* falls irgendwo ein background-color gesetzt wird: killt das sauber */
  background-color: transparent !important;
}

.lc-ref{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:rgba(229,173,198,.15); border:1px solid rgba(229,173,198,.45); color:#fff;
}

.lc-range-hint{ color:var(--muted); font-size:.95rem; margin-top:10px; }

/* ==========================================================
   FINAL: 1 Außenrahmen + saubere Innenlinien (kein Doppelrahmen)
   ========================================================== */

/* 1) Harter Reset: ALLE Borders von Table/Cells weg (Theme/Globals neutralisieren) */
.lc-table,
.lc-table thead,
.lc-table tbody,
.lc-table tr,
.lc-table th,
.lc-table td{
  border: 0 !important;
}

/* 2) Innenlinien in eurer Accent-Optik (KEINE Linie am linken Außenrand) */
:root{
  /* optional nur zur Lesbarkeit – kann auch weg */
  --lc-line: rgba(229,173,198,.16);
}

/* Vertikale Trenner nur zwischen Spalten (nie außen links) */
.lc-table th + th,
.lc-table td + td{
  border-left: 1px solid var(--lc-line) !important;
}

/* Horizontale Trenner nur zwischen Zeilen (nie außen oben/unten doppelt) */
.lc-table tbody tr + tr td{
  border-top: 1px solid var(--lc-line) !important;
}

/* Header-Unterkante als einheitliche Linie (optional, aber wirkt sauber) */
.lc-table thead th{
  border-bottom: 1px solid var(--lc-line) !important;
}

/* Einheitliches Tabellenverhalten */
.lc-transactions .lc-table{
  table-layout: fixed;       /* Colgroup-Breiten strikt anwenden */
  width: 100%;
  border-collapse: collapse;  /* keine „Breiten-Addition“ durch Zellen-Borders */
}


/* Falls Inhalte länger sind, sauber kappen */
.lc-transactions .lc-table th,
.lc-transactions .lc-table td{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zellenbreiten inklusive Padding berechnen, damit 30/50/20% nicht über 100% gehen */
.lc-transactions .lc-table th,
.lc-transactions .lc-table td{
  box-sizing: border-box;
}


/* Alles linksbündig – auch Zahlen */
.lc-transactions .lc-table thead th,
.lc-transactions .lc-table td{
  text-align: left;
}

/* sicherheitshalber auch is-num für Kopf + Zellen */
.lc-transactions .lc-table th.is-num,
.lc-transactions .lc-table td.is-num{
  text-align: left !important;
}


/* Einheitliche Spaltenbreiten über COLGROUP (Desktop) */
.lc-transactions .lc-table.cols-3 col:nth-child(1){ width:30%; } /* Datum  */
.lc-transactions .lc-table.cols-3 col:nth-child(2){ width:50%; } /* Aktion */
.lc-transactions .lc-table.cols-3 col:nth-child(3){ width:20%; } /* Coins  */

.lc-transactions .lc-table.cols-4 col:nth-child(1){ width:24%; } /* Datum      */
.lc-transactions .lc-table.cols-4 col:nth-child(2){ width:36%; } /* Geschenk/Aktion */
.lc-transactions .lc-table.cols-4 col:nth-child(3){ width:16%; } /* Coins      */
.lc-transactions .lc-table.cols-4 col:nth-child(4){ width:24%; } /* Empfänger/Notiz */



/* ================
   Mobile (≤820px)
   ================ */
@media (max-width: 820px){

  /* --- Überschriften & Tabs --- */
  .lc-transactions h2,
  .lc-transactions .lc-title{
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 10px;
  }
  .lc-transactions .lc-tabs{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    margin: 6px 0 12px;
  }
  .lc-transactions .lc-tabs button{
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
  }

  /* --- Tabellen-Layout --- */
  .lc-transactions .lc-pane{
    padding: 0 12px;
    margin-bottom: 14px;
  }
  .lc-transactions .lc-table{
    width: 100%;
    font-size: 14px;
    border-radius: 12px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  /* PATCH 3: Header-Radius muss zum mobilen Tabellenradius (12px) passen */
  .lc-transactions .lc-table thead{
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden; /* wichtig: clippt Header-Frame sauber in den Radius */
  }

  .lc-transactions .lc-table th,
  .lc-transactions .lc-table td{
    padding: 10px 12px;
  }

  /* 3-Spalten mobil: sauber per COLGROUP und fixed layout – Header/Body deckungsgleich */
  .lc-transactions .lc-table.cols-3{ table-layout: fixed !important; }
  .lc-transactions .lc-table.cols-3 col:nth-child(1){ width: 38% !important; } /* Datum  */
  .lc-transactions .lc-table.cols-3 col:nth-child(2){ width: 42% !important; } /* Aktion */
  .lc-transactions .lc-table.cols-3 col:nth-child(3){ width: 20% !important; } /* Coins  */
	
  .lc-transactions .lc-table.cols-4 col:nth-child(1){ width: 34%; }
  .lc-transactions .lc-table.cols-4 col:nth-child(2){ width: 32%; }
  .lc-transactions .lc-table.cols-4 col:nth-child(3){ width: 16%; }
  .lc-transactions .lc-table.cols-4 col:nth-child(4){ width: 18%; }

  /* --- Coins immer als echte table-cell --- */
  .lc-transactions .lc-table.cols-3 td:last-child{
    display: table-cell;
    white-space: nowrap;
    overflow: hidden;
  }

  /* --- Nur Notiz-Spalte (4 Spalten) clampen --- */
  .lc-transactions .lc-table.cols-4 td:last-child{
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /* --- Coins linksbündig --- */
  .lc-transactions .lc-table td.is-num{ text-align: left; }

/* --- Sticky Table Head (DEAKTIVIERT auf Mobil wegen Chrome/Android Bug) --- */
.lc-transactions .lc-table thead th{
  position: static;   /* kein sticky mehr */
  /* Hintergrund & z-index dürfen bleiben, sind hier aber egal */
}


  /* --- Aktion-Badges kompakt zentriert --- */
  .lc-transactions .lc-ref{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
  }

  /* --- Filterbox --- */
  .lc-transactions .lc-filter{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: linear-gradient(145deg,#321823,#1f0f17);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    margin: 8px 0 14px;
    overflow: hidden;
  }
  .lc-transactions .lc-filter > summary{
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 800;
    color: #fff;
  }
  .lc-transactions .lc-filter[open] > summary{
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .lc-transactions .lc-filter .lc-tabs{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
  }
  .lc-transactions .lc-filter .lc-tabs button{
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 10px;
  }
}
/* Wrapper übernimmt Optik & Clipping (EINZIGER Außenrahmen) */
.lc-tablewrap{
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(145deg,#321823,#1f0f17);

  /* Rahmen muss bei 100% klar sichtbar sein */
  border: 1px solid rgba(255,255,255,.45);

  /* Schatten AUS (sonst “frisst” er die helle Kante bei 100%) */
  box-shadow: none;
}

/* Tabelle: keine eigene Optik/kein Rahmen (kommt vom Wrapper) */
.lc-table{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* ==========================================================
   MOBIL (≤820px) – Horizontales Scrollen + optimierte Breiten
   ========================================================== */
@media (max-width: 820px){

  /* 1) Wrapper scrollt – Ecken bleiben rund */
  .lc-tablewrap{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* Mobile Radius konsistent */
    border-radius: 12px;
  }

  /* 2) Tabelle bekommt Breite aus den COLGROUP-Werten */
  .lc-table{
    width: auto !important;           /* darf breiter als Viewport werden */
    table-layout: fixed !important;   /* feste Spaltenbreiten */
    min-width: 100%;                  /* mind. so breit wie Container */
  }

  /* 3) Einheitliche Zeilenhöhe */
  .lc-table th, .lc-table td{
    padding: 10px 12px;
    line-height: 1.3;
    vertical-align: middle;
  }

  /* 4) 3-Spalten-Tabellen: Spalten 1–3 gleich breit */
  .lc-table.cols-3 col:nth-child(1),
  .lc-table.cols-3 col:nth-child(2),
  .lc-table.cols-3 col:nth-child(3){
    width: 220px !important;
  }

  /* 5) 4-Spalten-Tabellen:
        Spalten 1–3 gleich breit (z. B. 180 px),
        Spalte 4 flexibel und dehnbar (kein Umbruch) */
  .lc-table.cols-4 col:nth-child(1),
  .lc-table.cols-4 col:nth-child(2),
  .lc-table.cols-4 col:nth-child(3){
    width: 180px !important;
  }
  .lc-table.cols-4 col:nth-child(4){
    width: auto !important;           /* darf sich ausdehnen */
  }

  /* 6) 2-Spalten-Tabellen (z. B. Chat Tagessummen):
        Keine Seitenränder und volle Breite */
  .lc-table.cols-2{
    width: 100% !important;
    table-layout: auto !important;
  }
  .lc-table.cols-2 col:nth-child(1){ width: 50% !important; }
  .lc-table.cols-2 col:nth-child(2){ width: 50% !important; }

  /* 7) Umbruch-Regeln:
        Spalten 1–3 kompakt, letzte Spalte darf breiter werden */
  .lc-table.cols-3 th, .lc-table.cols-3 td,
  .lc-table.cols-4 th:nth-child(-n+3),
  .lc-table.cols-4 td:nth-child(-n+3){
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* letzte Spalte: kein Umbruch, dehnbar */
  .lc-table.cols-4 th:last-child,
  .lc-table.cols-4 td:last-child{
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip;
  }
}



@media (max-width:820px){
  .lc-transactions .lc-table.cols-4 td:last-child{
    display: table-cell !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    white-space: nowrap !important;   /* deine neue Vorgabe */
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

@media (max-width:820px){
  /* echte vertikale Borders aus */
  .lc-table.cols-4 th,
  .lc-table.cols-4 td{
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* optischer Trenner identisch auf TH + TD (Accent statt grau) */
  .lc-table.cols-4 th + th,
  .lc-table.cols-4 td + td{
    box-shadow: inset 1px 0 rgba(229,173,198,.14);
  }
  .lc-table.cols-4 th:first-child,
  .lc-table.cols-4 td:first-child{ box-shadow: none; }
}

/* =========================================
   MOBIL – rechter Glow: transform (snappy)
   ========================================= */
@media (max-width:820px){
  .lc-tablewrap{
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* ruckelfreieres Scrolling / weniger Main-Thread-Arbeit */
    overscroll-behavior-x: contain;
    /* beide Richtungen erlauben, Seite kann vertikal scrollen */
    touch-action: auto;            /* alternativ: pan-x pan-y */
    contain: layout paint;
  }
	
	
/* =========================================
   MOBIL: Rechter Glow als FIXED Overlay
   ========================================= */
@media (max-width:820px){
  /* Fixed-Overlay, am Viewportrand – kein Lag beim Scrollen */
  .lc-fade-fixed {
    position: fixed;
    /* rechts inkl. Notch/Safe-Area */
    right: max(0px, env(safe-area-inset-right, 0px));
    left: 0;             /* X-Position wird per JS gesetzt */
    right: auto;         /* kein right mehr */
    width: 24px;                 /* Stärke des Fades */
    height: 0;                   /* wird per JS gesetzt */
    top: 0;                      /* wird per JS gesetzt */
    pointer-events: none;
    z-index: 9999;
    background: linear-gradient(to left,
      rgba(255,255,255,0.20) 0%,
      rgba(255,255,255,0.00) 100%);
    opacity: 0;                  /* per JS gesteuert */
    transition: opacity .12s linear;
    /* Rundungen wie die Tabelle (14px bei dir) */
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-clip: padding-box; /* saubere Clipping-Kante */

  }

  /* Optional: subtiler Schatten für mehr Tiefe */
  .lc-fade-fixed.has-shadow {
    box-shadow: 0 0 16px rgba(0,0,0,.25);
  }
}

	/* ==========================================================
   FINAL OVERRIDES (v22)
   Ziel: exakt 1 Außenrahmen + alle Linien in Accent, keine Doppelrahmen
   ========================================================== */

/* 1) EINZIGER Außenrahmen: bei 100% klar sichtbar (Shadow AUS) */
.lc-tablewrap{
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
  background-clip: padding-box;
}

/* 2) Tabelle selbst: garantiert rahmenlos */
.lc-table{
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 3) Header darf keinen „Extra-Rahmen“ erzeugen */
.lc-table thead,
.lc-table thead tr,
.lc-table thead th{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* 4) Vertikale Trenner (cols-4) überall in Accent erzwingen
      (wichtig, weil v22 das später wieder auf weiß überschreibt) */
@media (max-width:820px){
  .lc-table.cols-4 th + th,
  .lc-table.cols-4 td + td{
    box-shadow: inset 1px 0 rgba(229,173,198,.14) !important;
  }
}

/* 5) Der rechte „Glow“ darf keine weiße Kante suggerieren */
@media (max-width:820px){
  .lc-fade-fixed{
    background: linear-gradient(to left,
      rgba(229,173,198,0.22) 0%,
      rgba(229,173,198,0.00) 100%) !important;
  }
}