/* Only what missive.css doesn't cover. Theme colors come from Missive's injected --missive-* variables;
   the fallbacks are the design's light values so the page also looks right outside Missive. */
:root {
  --lt-text: var(--missive-text-color-a, #1f2329);
  --lt-bg: var(--missive-background-color, #fff);
  --lt-muted: var(--missive-text-color-c, #8a8f98);
  --lt-muted-2: var(--missive-text-color-b, #6b717a);
  --lt-border: var(--missive-light-border-color, #eceef1);
  --lt-border-strong: var(--missive-border-color, #dcdfe4);
  --lt-accent: var(--accent-color, #2f6fd6);
  --lt-hover: var(--missive-light-active-color, #f6f7f9);
  --lt-skel: var(--missive-light-border-color, #eef0f3);
  --lt-err-bg: #fdf1f0; --lt-err-title: #a3281d; --lt-err-text: #6e2a24; --lt-err-border: #efc9c5; --lt-err-btn: #fff;
}
/* Dark palette: Missive sets html[data-theme=dark]; the media query covers the system setting. */
html[data-theme=dark] {
  --lt-text: var(--missive-text-color-a, #eceef1); --lt-bg: var(--missive-background-color, #1e2024); --lt-muted: var(--missive-text-color-c, #8d939c); --lt-muted-2: var(--missive-text-color-b, #8d939c);
  --lt-border: var(--missive-light-border-color, #2c2f35); --lt-border-strong: var(--missive-border-color, #3a3e45);
  --lt-hover: var(--missive-light-active-color, #26292e); --lt-skel: var(--missive-light-border-color, #2c2f35);
  --lt-err-bg: #3a2322; --lt-err-title: #ff9b90; --lt-err-text: #e8c3bf; --lt-err-border: #5c3431; --lt-err-btn: transparent;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme=light]) {
    --lt-text: var(--missive-text-color-a, #eceef1); --lt-bg: var(--missive-background-color, #1e2024); --lt-muted: var(--missive-text-color-c, #8d939c); --lt-muted-2: var(--missive-text-color-b, #8d939c);
    --lt-border: var(--missive-light-border-color, #2c2f35); --lt-border-strong: var(--missive-border-color, #3a3e45);
    --lt-hover: var(--missive-light-active-color, #26292e); --lt-skel: var(--missive-light-border-color, #2c2f35);
    --lt-err-bg: #3a2322; --lt-err-title: #ff9b90; --lt-err-text: #e8c3bf; --lt-err-border: #5c3431; --lt-err-btn: transparent;
  }
}

#app { height: 100%; display: flex; flex-direction: column; overflow-x: hidden; }

.lt-header { padding: 12px 14px; border-bottom: 1px solid var(--lt-border); display: flex; align-items: center; gap: 10px; flex: none; }
.lt-logo { width: 26px; height: 26px; flex: none; }
.lt-header-text { min-width: 0; flex: 1; }
.lt-title { font-size: 13px; font-weight: 600; color: var(--lt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-sub { font-size: 11.5px; color: var(--lt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Copyable emails: look like text, underline on hover; feedback lives in the .lt-tip label */
.lt-copy { all: unset; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lt-empty-text .lt-copy, .lt-footer .lt-copy { white-space: normal; overflow-wrap: anywhere; }
.lt-copy:hover { text-decoration: underline; }
.lt-copy:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 1px; }
.lt-inline-link { color: var(--lt-accent); text-decoration: none; }
.lt-inline-link:hover { text-decoration: underline; }
.lt-tip {
  position: fixed; z-index: 10; pointer-events: none; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 5px; font-size: 11px; font-weight: 500;
  background: var(--lt-text); color: var(--lt-bg);
  opacity: 0; transition: opacity .12s;
}
.lt-tip-on { opacity: 1; }
.lt-tip svg { fill: none; } /* missive.css fills every svg with currentColor */

/* loading */
@keyframes lt-pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.lt-skeleton { padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; animation: lt-pulse 1.4s ease-in-out infinite; }
.lt-skel-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--lt-skel); border-radius: 8px; }
.lt-bar { height: 10px; background: var(--lt-skel); border-radius: 4px; }
.lt-bar-lg { height: 12px; }
.lt-footer { margin-top: auto; padding: 12px 14px; font-size: 11.5px; color: var(--lt-muted); overflow-wrap: anywhere; }

/* Portal link, centered at the very bottom of every state */
.lt-portal-link { margin-top: auto; flex: none; padding: 10px 14px 12px; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--lt-accent); text-decoration: none; }
.lt-portal-link:hover { text-decoration: underline; }
.lt-footer + .lt-portal-link { margin-top: 0; } /* loading footer already pushes to the bottom */

/* empty states */
.lt-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.lt-empty-title { font-size: 14px; font-weight: 600; color: var(--lt-text); }
.lt-empty-text { font-size: 12.5px; line-height: 1.5; color: var(--lt-muted-2); text-wrap: pretty; overflow-wrap: anywhere; }
.lt-em { color: var(--lt-text); }
.lt-circle { width: 40px; height: 40px; border-radius: 50%; background: var(--lt-hover); color: var(--lt-muted); font-size: 18px; display: grid; place-items: center; }
.lt-stack { display: flex; }
.lt-stack i { width: 28px; height: 34px; border-radius: 5px; border: 1.5px solid var(--lt-border-strong); background: var(--missive-background-color, #fff); }
.lt-stack i + i { margin-left: -14px; }
.lt-stack i:first-child { transform: rotate(-8deg); }
.lt-stack i:last-child { transform: rotate(8deg); }
.lt-stack i:only-child { transform: none; }

/* error */
.lt-error { margin: 14px; padding: 12px; border-radius: 8px; background: var(--lt-err-bg); display: flex; flex-direction: column; gap: 6px; }
.lt-error-title { font-size: 13px; font-weight: 600; color: var(--lt-err-title); }
.lt-error-text { font-size: 12px; line-height: 1.5; color: var(--lt-err-text); }
.lt-error-text code { font-family: ui-monospace, Menlo, monospace; }
.lt-retry { margin-top: 4px; padding: 6px 12px; border-radius: 6px; background: var(--lt-err-btn); border: 1px solid var(--lt-err-border); font-size: 12.5px; color: var(--lt-err-title); cursor: pointer; }

/* results */
.lt-count { padding: 12px 14px 4px; font-size: 11.5px; color: var(--lt-muted-2); }
.lt-list { flex: 1; overflow-y: auto; padding: 4px 10px 12px; } /* spacing + divider between customers from Missive's .section */
.lt-group { gap: 4px; } /* layout from Missive's .columns-vertical */
.lt-group-title { margin: 0; padding: 6px 4px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lt-text); }
.lt-row {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; border: 1px solid var(--lt-border);
}
.lt-row:hover, .lt-row:focus-visible { background: var(--lt-hover); border-color: var(--lt-border-strong); }
.lt-row:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 1px; }
.lt-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lt-row-title { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 500; color: var(--lt-text); overflow-wrap: anywhere; }
.lt-vq {
  flex: none; width: 22px; height: 22px; margin-top: -2px; border-radius: 50%;
  display: grid; place-items: center; background: #E31439; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.lt-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-date { font-size: 11px; color: var(--lt-muted); }
/* Arrow and "Öffnen ↗" share one grid cell sized to the wider of the two, so hover swaps them without layout shift. */
.lt-action { display: grid; align-items: center; justify-items: end; flex: none; }
.lt-action > * { grid-area: 1 / 1; }
.lt-arrow { font-size: 15px; color: var(--lt-muted); }
.lt-open { visibility: hidden; font-size: 11.5px; font-weight: 500; color: var(--lt-accent); white-space: nowrap; }
.lt-row:hover .lt-arrow, .lt-row:focus-visible .lt-arrow { visibility: hidden; }
.lt-row:hover .lt-open, .lt-row:focus-visible .lt-open { visibility: visible; }

/* --c is the status color from LeadTable. Tinted background; label mixes the color with the theme's text
   color, so it darkens in light mode and lightens in dark mode. Gray when LeadTable sends no color. */
.lt-pill {
  --c: #8a8f98;
  padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 500;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: color-mix(in srgb, var(--c) 65%, var(--lt-text));
}