/* =========================================================
   UADE Transparency – Light Theme (UA-DE Brand Palette)
   ========================================================= */

/* ---- Farben & Variablen ---- */
:root{
  --uade-bg:#ffffff;
  --uade-surface:#ffffff;
  --uade-card:#ffffff;

  --uade-text:#1f2937;        /* gray-800 */
  --uade-muted:#6b7280;       /* gray-500 */
  --uade-head:#0f172a;        /* slate-900 */

  --uade-border:#e5e7eb;      /* gray-200 */
  --uade-border-soft:#eef2f7; /* feine Tabellenlinie */

  /* Brand-Palette nach Logo */
  --brand:#64c4da;                 /* Cyan (Hauptakzent) */
  --brand-soft: rgba(100,196,218,.14);
  --brand-soft-2: rgba(100,196,218,.24);
  --brand-warm:#fecd0f;            /* Gelb (dezent für Linien/Details) */
  --danger:#e2001a;                /* Rot (negativ) */

  --uade-positive:#059669;
  --uade-negative: var(--danger);

  --uade-radius:16px;
  --uade-shadow:0 6px 16px rgba(2,6,23,.05);
}

/* ---- Seite/Container ---- */
.uade-wrap{
  max-width:1024px;
  margin:0 auto;
  padding:2rem 1.5rem;
  color:var(--uade-text);
}
.uade-wrap h1,.uade-wrap h2,.uade-wrap h3{
  color:var(--uade-head);
  line-height:1.2;
  margin:1.25rem 0 .75rem;
}
.uade-wrap h1{font-size:clamp(1.9rem,3.3vw,2.4rem)}
.uade-wrap h2{font-size:clamp(1.35rem,2.2vw,1.6rem)}
.uade-wrap h3{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--uade-muted)}
.uade-lead{font-size:clamp(1rem,1.2vw,1.1rem);color:var(--uade-muted);margin-bottom:1rem}

/* ---- Cards (Abschnitte) ---- */
.uade-card{
  background:#fff;
  border:1px solid var(--uade-border);
  border-radius:var(--uade-radius);
  box-shadow:0 10px 26px rgba(2,6,23,.08);
  padding:1.5rem;
  margin:2rem 0;
}
.uade-card>h2{
  margin-top:0;
  position:relative;
  padding-left:.8rem;
}
.uade-card>h2::before{
  content:"";
  position:absolute;left:0;top:.1rem;bottom:.1rem;
  width:4px;border-radius:4px;
  background:linear-gradient(var(--brand-warm),var(--brand));
}

/* ---- KPI-Gitter ---- */
.uade-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.9rem;
  margin:1rem 0 1.25rem;
}
@media(max-width:900px){.uade-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.uade-kpis{grid-template-columns:1fr}}

.uade-kpi{
  background:var(--uade-card);
  border:1px solid var(--uade-border);
  border-radius:14px;
  box-shadow:var(--uade-shadow);
  padding:1rem 1.1rem;
}
.uade-kpi .label{font-size:.82rem;color:var(--uade-muted);margin-bottom:.35rem}
.uade-kpi .value{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:700;color:var(--uade-head)}
.uade-kpi .hint{margin-top:.35rem;font-size:.8rem;color:var(--uade-muted)}

/* ---- Tabellen (Summary & Donations) ---- */
table.uade-summary,
table.uade-donations{
  width:100%;
  border-collapse:separate !important;
  border-spacing:0 !important;
  border-radius:12px !important;
  overflow:hidden;
  clip-path: inset(0 round 12px);   /* Safari/Edge Fix */
  background:#fff;
  box-shadow:var(--uade-shadow);
  /* kein Gesamtrahmen */
  border:none !important;
}

/* Caption mit brandigem Verlauf */
table.uade-summary caption,
table.uade-donations caption{
  text-align:left;
  padding:.85rem 1rem;
  font-weight:700;
  color:var(--uade-head);
  background:linear-gradient(90deg,var(--brand-soft),transparent 65%);
  border-bottom:1px solid var(--uade-border);
}

/* Kopfzeile */
table.uade-summary thead th,
table.uade-donations thead th{
  padding:.7rem 1rem;
  font-weight:700;
  color:var(--uade-head);
  background:#f7fafc;
  border-bottom:1px solid var(--uade-border);
}

/* Zellen – nur horizontale Linien */
table.uade-summary th, table.uade-summary td,
table.uade-donations th, table.uade-donations td{
  padding:.7rem 1rem;
  border-bottom:1px solid var(--uade-border-soft);
  color:var(--uade-text);
  text-align:left !important;
}
.uade-right{ text-align:right !important; }
.uade-neg{ color:var(--uade-negative); font-weight:600; }

/* Hover */
table.uade-summary tbody tr:hover,
table.uade-donations tbody tr:hover{
  background:var(--brand-soft);
}

/* Footer (Summenzeile) */
table.uade-summary tfoot th,
table.uade-summary tfoot td{
  background:#f9fafb;
  font-weight:700;
  border-top:1px solid var(--uade-border) !important;
  border-bottom:1px solid var(--uade-border) !important;
}

/* Zebra-Streifen */
table.uade-summary tbody tr:nth-child(odd){ background:#fcfdff; }

/* ---- Summary: Baum/Toggle & Hierarchie ---- */
.uade-summary--tree .uade-treecol{
  white-space:normal;
  word-break:break-word;
  text-align:left !important;
}
.uade-summary--tree .uade-treecol>.uade-toggle,
.uade-summary--tree .uade-treecol>.uade-node-leaf{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.uade-summary--tree .uade-node-title,
.uade-summary--tree .uade-node-leaf{
  display:inline;
  color:inherit;
}
.uade-summary--tree .uade-toggle{
  background:transparent;border:0;padding:0;
  font:inherit;cursor:pointer;color:inherit;text-align:left;
}
.uade-summary--tree .uade-toggle:hover .uade-node-title{ text-decoration:underline; }
.uade-summary--tree .uade-caret{
  width:.7rem;height:.7rem;
  border-right:2px solid #94a3af;
  border-bottom:2px solid #94a3af;
  transform:rotate(-45deg);
  transition:transform .15s ease;
  margin-top:.08rem;
  flex:0 0 auto;
}
.uade-summary--tree .uade-toggle[aria-expanded="true"] .uade-caret{ transform:rotate(45deg); }
.uade-summary--tree tr.uade-child.is-hidden{ display:none; }

/* ---- Donations: mobil ---- */
@media(max-width:640px){
  table.uade-donations thead{ display:none; }
  table.uade-donations tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem 1rem;
    padding:.6rem 1rem;
  }
  table.uade-donations td{ border:0; padding:0; }
  table.uade-donations td:nth-child(1)::before{ content:"Datum";   display:block; color:var(--uade-muted); font-size:.8rem; }
  table.uade-donations td:nth-child(2)::before{ content:"TxId";    display:block; color:var(--uade-muted); font-size:.8rem; }
  table.uade-donations td:nth-child(3)::before{ content:"Projekt"; display:block; color:var(--uade-muted); font-size:.8rem; }
  table.uade-donations td:nth-child(4)::before{ content:"Betrag";  display:block; color:var(--uade-muted); font-size:.8rem; }
  table.uade-donations td.uade-right{ text-align:left !important; }
}

/* ---- Pagination ---- */
.uade-pagination{
  margin-top:.75rem;
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
}
.uade-pagination .uade-page,
.uade-pagination .uade-page--current{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.35rem .6rem;
  border:1px solid var(--uade-border);
  border-radius:10px;
  text-decoration:none;
  color:var(--uade-text);
  background:#fff;
}
.uade-pagination .uade-page:hover{ background:#f3f4f6; }
.uade-pagination .uade-page--current{
  font-weight:700;
  background:var(--brand-soft);
  border-color:#cdebf4;
}

/* ---- Utilities ---- */
.uade-muted{ color:var(--uade-muted); }

/* ===== UADE: Hard Override inside .uade-wrap ===== */

/* 0) Scope: nur innerhalb des Seiten-Containers */
.uade-wrap table.uade-summary,
.uade-wrap table.uade-donations {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  background: #fff !important;
  border: none !important;         /* KEIN äußerer Rahmen */
  border-radius: 12px !important;
  overflow: hidden;
  clip-path: inset(0 round 12px);  /* sichtbare Ecken */
  box-shadow: var(--uade-shadow);
}

/* 1) ALLE Ränder/Zentrierungen zurücksetzen */
.uade-wrap table.uade-summary *,
.uade-wrap table.uade-donations * {
  border: 0 !important;
  text-align: left !important;
  background-image: none !important;
}

/* 2) Caption (Brand-Verlauf) wirklich durchsetzen */
.uade-wrap table.uade-summary > caption,
.uade-wrap table.uade-donations > caption {
  text-align: left;
  padding: .85rem 1rem;
  font-weight: 700;
  color: var(--uade-head);
  background: linear-gradient(90deg, var(--brand-soft), transparent 65%) !important;
  border-bottom: 1px solid var(--uade-border) !important;
}

/* 3) Thead: nur Unterkante */
.uade-wrap table.uade-summary thead th,
.uade-wrap table.uade-donations thead th {
  padding: .7rem 1rem;
  font-weight: 700;
  color: var(--uade-head);
  background: #f7fafc !important;
  border-bottom: 1px solid var(--uade-border) !important;
}

/* 4) Body: NUR horizontale Linien unten pro Zeile */
.uade-wrap table.uade-summary tbody th,
.uade-wrap table.uade-summary tbody td,
.uade-wrap table.uade-donations tbody th,
.uade-wrap table.uade-donations tbody td {
  padding: .7rem 1rem;
  color: var(--uade-text);
  border-bottom: 1px solid var(--uade-border-soft) !important;
}

/* Zahlen wirklich rechts */
.uade-wrap .uade-right { text-align: right !important; }
.uade-wrap .uade-neg   { color: var(--uade-negative) !important; font-weight: 600; }

/* 5) Footer/Summe: oben & unten Linie, leicht abgesetzt */
.uade-wrap table.uade-summary tfoot th,
.uade-wrap table.uade-summary tfoot td {
  background: #f9fafb !important;
  font-weight: 700;
  border-top: 1px solid var(--uade-border) !important;
  border-bottom: 1px solid var(--uade-border) !important; /* finale Abschlusslinie */
}

/* 6) Hover sanft in Brand */
.uade-wrap table.uade-summary tbody tr:hover,
.uade-wrap table.uade-donations tbody tr:hover {
  background: var(--brand-soft) !important;
}

/* 7) Tree-Spalte: Caret + Titel */
.uade-wrap .uade-summary--tree .uade-treecol { white-space: normal; word-break: break-word; }
.uade-wrap .uade-summary--tree .uade-treecol > .uade-toggle,
.uade-wrap .uade-summary--tree .uade-treecol > .uade-node-leaf {
  display: inline-flex; align-items: center; gap: .55rem;
}
.uade-wrap .uade-summary--tree .uade-caret {
  width: .7rem; height: .7rem;
  border-right: 2px solid #94a3af;
  border-bottom: 2px solid #94a3af;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  margin-top: .08rem;
}
.uade-wrap .uade-summary--tree .uade-toggle[aria-expanded="true"] .uade-caret {
  transform: rotate(45deg);
}

/* Caret wieder sichtbar machen */
.uade-wrap .uade-summary--tree .uade-caret {
  display:inline-block;
  width:.7rem;
  height:.7rem;
  border-right:2px solid #94a3af !important;  /* Pfeil wieder zeichnen */
  border-bottom:2px solid #94a3af !important;
  transform:rotate(-45deg);
  transition:transform .15s ease;
  margin-top:.08rem;
}

.uade-wrap .uade-summary--tree .uade-toggle[aria-expanded="true"] .uade-caret {
  transform:rotate(45deg);
}

/* Overhead-Karte (Progress) */
.uade-kpi--overhead .uade-oh-bar{ margin-top:.6rem; height:8px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.uade-kpi--overhead .uade-oh-bar>span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--brand-soft-2)); border-radius:999px; transition:width .4s ease; }
.uade-kpi--overhead .value{ letter-spacing:.2px; }
