/* ══ Porto-Optimierung (Redesign 03.10.2026) ══════════════════════════════════════
   Markup: index.html #pagePorto, Ausgabe: js/archiv.js (renderPortoTable, portoRenderDetail).
   Nur Tokens aus app.css/modern.css, damit Hell, Dunkel und Dunkel (neutral, HIG) ohne eigene
   Farbwerte stimmen. Ausnahme: die drei Porto-Toene unten, je Stufe einmal gesetzt.
   Breiten per Container-Query auf .porto-wrap (App-Bereich, nicht Fenster). Das Detail-Overlay
   liegt bewusst AUSSERHALB von .porto-wrap: container-type macht den Container zum Bezugsrahmen
   fuer position:fixed (siehe Mein-Tag-Falle in ProjectaPro/CLAUDE.md). */

#pagePorto {
  --porto-mail: var(--green-dot, var(--green));
  --porto-both: var(--brand);
  --porto-post: var(--orange);
  --porto-grouped: #f2f2f7;      /* Detail: iOS-Gruppenhintergrund */
  --porto-cell: #ffffff;
}
html.dark #pagePorto { --porto-grouped: transparent; --porto-cell: var(--surface-2); }
html.dark[data-dark-variant="hig"] #pagePorto { --porto-cell: var(--elev-overlay-2, #323234); }

.porto-wrap { container: porto / inline-size; display: flex; flex-direction: column; gap: 14px; }

/* ── Versandbilanz ─────────────────────────────────────────────────────────── */
#pagePorto .porto-bilanz {
  display: grid; grid-template-columns: minmax(200px, 0.7fr) 2fr; gap: 28px; align-items: center;
  padding: 24px 28px; margin: 0;
}
.porto-quote-num {
  white-space: nowrap; font-size: clamp(44px, 4vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.porto-quote-text { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); max-width: 26ch; }
.porto-quote-text strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.porto-bar { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.porto-bar-seg { display: block; height: 100%; width: 0; transition: width 0.5s cubic-bezier(.2,.7,.2,1); }
.porto-bar-seg.is-mail { background: var(--porto-mail); }
.porto-bar-seg.is-both { background: var(--porto-both); }
.porto-bar-seg.is-post { background: var(--porto-post); }

.porto-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.porto-leg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px 9px;
  border: none; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.porto-leg:hover { background: var(--hover); }
.porto-leg:focus-visible { outline: none; box-shadow: var(--ring); }
.porto-leg[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.porto-leg-num { font-size: 24px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text); }
.porto-leg-label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.porto-leg-label::before { content: ""; width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.porto-leg.is-mail .porto-leg-label::before { background: var(--porto-mail); }
.porto-leg.is-both .porto-leg-label::before { background: var(--porto-both); }
.porto-leg.is-post .porto-leg-label::before { background: var(--porto-post); }

/* ── Werkzeugleiste ────────────────────────────────────────────────────────── */
.porto-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.porto-search { position: relative; flex: 1 1 240px; max-width: 380px; color: var(--text-3); }
.porto-search > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#pagePorto .porto-search .form-input { width: 100%; padding-left: 34px; padding-right: 34px; }
.porto-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
#portoClearSearch {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 999px; background: none; color: var(--text-3); cursor: pointer;
}
#portoClearSearch:hover { background: var(--hover); color: var(--text); }

.porto-obj { position: relative; }
#portoObjBtn { display: inline-flex; align-items: center; gap: 8px; min-width: 170px; max-width: 280px; }
#portoObjBtn.is-set { color: var(--brand-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-text) 45%, transparent); }
#portoObjLabel { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#portoObjArrow { font-size: 9px; color: var(--text-3); }
#portoObjDrop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: min(320px, calc(100vw - 32px));
  max-height: 360px; overflow-y: auto; border-radius: 12px;
  background: var(--surface-solid); box-shadow: var(--pop-shadow), 0 0 0 1px var(--border);
}
html.dark[data-dark-variant="hig"] #portoObjDrop { background: var(--elev-overlay-2, #323234); box-shadow: none; }
.porto-obj-filter { position: sticky; top: 0; padding: 8px; background: inherit; border-bottom: 1px solid var(--border); }
.porto-obj-filter .form-input { width: 100%; }
#pagePorto .porto-obj-item {
  display: flex; gap: 8px; width: 100%; min-height: 0; margin: 0; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border-light); border-radius: 0;
  background: transparent; box-shadow: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
#pagePorto .porto-obj-item:hover, #pagePorto .porto-obj-item:focus-visible, #pagePorto .porto-obj-item.is-sel { background: var(--hover); }
#pagePorto .porto-obj-item:focus-visible { outline: 2px solid var(--brand-text); outline-offset: -2px; }
.porto-obj-item.is-sel { font-weight: 600; }
.porto-obj-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.porto-obj-item span { color: var(--text-2); flex: 1; }
.porto-obj-leer { padding: 14px; text-align: center; color: var(--text-3); font-size: 13px; }

.porto-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface-2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.porto-seg::-webkit-scrollbar { display: none; }
#pagePorto .porto-seg button {
  min-height: 32px; padding: 0 13px; border: none; border-radius: 8px; background: transparent;
  color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#pagePorto .porto-seg button:hover { color: var(--text); background: var(--hover); }
#pagePorto .porto-seg button:focus-visible { outline: none; box-shadow: var(--ring); }
#pagePorto .porto-seg button.active { background: var(--surface-solid); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(15,23,42,0.08), 0 0 0 1px var(--border); }
html.dark #pagePorto .porto-seg button.active { background: rgba(255,255,255,0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

.porto-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px 0 8px;
  border: none; border-radius: 10px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer;
}
.porto-toggle:hover { background: var(--hover); color: var(--text); }
.porto-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.porto-switch { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--border-strong); transition: background 0.2s; flex-shrink: 0; }
.porto-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 0.2s; }
.porto-toggle[aria-pressed="true"] { color: var(--text); }
.porto-toggle[aria-pressed="true"] .porto-switch { background: var(--green-dot, var(--green)); }
.porto-toggle[aria-pressed="true"] .porto-switch::after { transform: translateX(12px); }
.porto-reload { margin-left: auto; width: 38px; padding: 0 !important; justify-content: center; }

.porto-count { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; margin: -4px 2px 0; min-height: 16px; }

/* ── Liste ─────────────────────────────────────────────────────────────────── */
#pagePorto .porto-list { padding: 0; margin: 0; overflow: hidden; }
.porto-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.porto-table th {
  padding: 11px 14px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.porto-table td { padding: 11px 14px; vertical-align: middle; border-bottom: 1px solid var(--border-light); }
html.dark[data-dark-variant="hig"] .porto-table td { border-bottom-color: var(--hig-div, var(--border-light)); }
.porto-table tbody tr { cursor: pointer; transition: background 0.1s; }
.porto-table tbody tr:hover { background: var(--hover); }
.porto-table tbody tr:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.porto-table tbody tr:last-child td { border-bottom: none; }

.porto-c-nr { width: 64px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.porto-c-vers { width: 1%; white-space: nowrap; }
.porto-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.porto-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 650; letter-spacing: -0.01em;
}
.porto-av.is-mail, .porto-badge.is-mail { background: var(--green-tint); color: var(--green-text); }
.porto-av.is-both, .porto-badge.is-both { background: var(--brand-tint); color: var(--brand-text); }
.porto-av.is-post, .porto-badge.is-post { background: var(--orange-tint); color: var(--orange-text); }
.porto-name { font-weight: 600; color: var(--text); line-height: 1.3; }
.porto-sub { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.porto-c-addr { color: var(--text-2); font-size: 12.5px; max-width: 260px; }
.porto-c-addr span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.porto-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
/* Sparhinweis: Versand per Post, obwohl eine E-Mail-Adresse da ist */
.porto-hint { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 500; color: var(--orange-text); }

.porto-mail { display: flex; align-items: center; gap: 7px; line-height: 1.65; min-width: 0; }
.porto-mail.is-off { color: var(--text-3); }
.porto-mail-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.porto-mail.is-off .porto-mail-addr { color: var(--text-3); }
.porto-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; border: 2px solid var(--text-3); }
.porto-mail:not(.is-off) .porto-dot { border: none; background: var(--porto-mail); }
.porto-std { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--brand-tint); color: var(--brand-text); white-space: nowrap; }
.porto-nomail { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.porto-nomail svg { color: var(--orange); flex-shrink: 0; }

#portoLoadMore { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-top: 1px solid var(--border-light); }
#portoLoadMoreText { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ── Breiten (App-Bereich) ─────────────────────────────────────────────────── */
/* iPad hochkant, schmale Fenster: Nr-Spalte weg (steht im Detail) */
@container porto (max-width: 960px) {
  .porto-table .porto-c-nr { display: none; }
  #pagePorto .porto-bilanz { grid-template-columns: minmax(170px, 0.6fr) 2fr; gap: 20px; padding: 20px 22px; }
  .porto-c-addr { max-width: 200px; }
  .porto-search { flex: 1 1 100%; max-width: none; }
}
/* Telefon: Bilanz gestapelt, Zeilen als Karten */
@container porto (max-width: 640px) {
  #pagePorto .porto-bilanz { grid-template-columns: 1fr; gap: 16px; padding: 18px 16px 14px; }
  .porto-quote { display: flex; align-items: baseline; gap: 12px; }
  .porto-quote-num { font-size: 44px; }
  .porto-quote-text { margin: 0; font-size: 13.5px; }
  .porto-legend { gap: 4px; margin-top: 10px; }
  .porto-leg { padding: 8px 8px 9px; }
  .porto-leg-num { font-size: 19px; }
  .porto-leg-label { font-size: 12px; gap: 5px; }

  .porto-search { flex: 1 1 100%; max-width: none; }
  #pagePorto .porto-search .form-input { font-size: 16px; min-height: 44px; } /* 16 px: iOS zoomt sonst beim Tippen */
  .porto-obj { flex: 1 1 0; min-width: 0; }
  #portoObjBtn { width: 100%; min-width: 0; max-width: none; min-height: 44px; }
  .porto-toggle, .porto-reload { min-height: 44px; }
  .porto-reload { width: 44px; margin-left: 0; }
  .porto-seg { order: 5; flex: 1 1 100%; }
  #pagePorto .porto-seg button { flex: 1 0 auto; min-height: 38px; padding: 0 10px; }

  .porto-table thead { display: none; }
  .porto-table, .porto-table tbody { display: block; }
  .porto-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who vers" "addr addr" "mail mail";
    column-gap: 10px; row-gap: 4px; padding: 13px 16px; border-bottom: 1px solid var(--border-light);
  }
  html.dark[data-dark-variant="hig"] .porto-table tbody tr { border-bottom-color: var(--hig-div, var(--border-light)); }
  .porto-table tbody tr:last-child { border-bottom: none; }
  .porto-table td { display: block; padding: 0; border: none; }
  .porto-table td.porto-c-nr { display: none; }
  .porto-c-who { grid-area: who; min-width: 0; }
  .porto-c-vers { grid-area: vers; width: auto; text-align: right; }
  .porto-c-addr { grid-area: addr; max-width: none; padding-left: 43px !important; }
  .porto-c-mail { grid-area: mail; padding-left: 43px !important; min-width: 0; }
  .porto-hint { white-space: normal; max-width: 120px; margin-left: auto; }
}

/* ── Detail-Dialog ─────────────────────────────────────────────────────────── */
#pagePorto .porto-modal { width: min(680px, calc(100vw - 48px)); max-height: 90vh; display: flex; flex-direction: column; }
.porto-detail-body { overflow-y: auto; background: var(--porto-grouped); display: flex; flex-direction: column; gap: 12px; }
.porto-detail-body .porto-section,
.porto-detail-body .porto-header-card { background: var(--porto-cell); border-radius: 12px; padding: 16px; margin: 0; }
html:not(.dark) .porto-detail-body .porto-section,
html:not(.dark) .porto-detail-body .porto-header-card { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.05); }
.porto-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.porto-section-label { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-bottom: 8px; }
.porto-sep { border-top: 1px solid var(--border-light); margin: 7px 0; }
html.dark[data-dark-variant="hig"] .porto-sep { border-color: var(--hig-div, var(--border-light)); }
.porto-text-primary { color: var(--text); }
.porto-text-secondary { color: var(--text-2); }
.porto-detail-body a.porto-text-primary { text-decoration: none; }
.porto-detail-body a.porto-text-primary:hover { text-decoration: underline; }
.porto-head { display: flex; gap: 14px; align-items: flex-start; }
.porto-head .porto-av { width: 52px; height: 52px; font-size: 18px; }
.porto-head-name { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--text); }
.porto-ok { color: var(--green-text); }
.porto-no { color: var(--text-3); }
.porto-pf { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 10px; font-size: 12.5px; }
.porto-pf-zeit { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.porto-vg { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 1px 0; }
.porto-vg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.porto-vg-dot.is-open { background: var(--porto-mail); }

@media (max-width: 767px) {
  .porto-detail-body { gap: 10px; }
  .porto-head .porto-av { width: 44px; height: 44px; font-size: 16px; }
  .porto-head-name { font-size: 16px; }
  .porto-pf { grid-template-columns: 36px minmax(0, 1fr); }
  .porto-pf-zeit { grid-column: 2; }
  .porto-detail-body .porto-mail-addr { white-space: normal; word-break: break-all; }
}


/* Cloud-Design 13.10.2026 (Handoff Versand): Versandwege überall gleich gefärbt wie im Versand, Nur E-Mail blau,
   E-Mail + Post violett, Nur Post orange; aktive Legende als Filter mit Tönung und Rand. Nur App-Tokens. */
#pagePorto { --porto-mail: var(--brand); --porto-both: var(--violet); --porto-post: var(--orange); }
#pagePorto .porto-av.is-mail, #pagePorto .porto-badge.is-mail { background: var(--pc-sel, var(--brand-tint)); color: var(--pc-brand-text, var(--brand-text)); }
#pagePorto .porto-av.is-both, #pagePorto .porto-badge.is-both { background: var(--violet-bg); color: var(--violet-text, var(--violet)); }
#pagePorto .porto-leg[aria-pressed="true"] { background: var(--pc-sel, var(--surface-2)); box-shadow: inset 0 0 0 1.5px var(--brand); }
@container (min-width: 820px) { #pagePorto .porto-bilanz { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); align-items: center; } }