/* ============================================================
   ACRM — Email list engine (.eml-*).
   Port 1:1 z DS karty „Components · Email list" (email-list.html,
   anatomie Gmailu): kategorie taby → jednořádkové řádky
   checkbox · odesílatel (184 px) · předmět — snippet · přílohové
   chipy · datum; na hover se datum vymění za rychlé akce.
   Nepřečtené = 600 + plný ink; přečtené = 500, o 10 % světlejší.
   Sdílí ho /posta + záložky E-maily (firma / osoba).
   ============================================================ */

/* ---- kategorie taby (Gmail struktura, styl .acrm-tabs) ---- */
.eml-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.eml-tab {
  position: relative;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  height: 48px;
  padding: 0 var(--sp-4);
  font: 600 13px var(--font-sans);
  color: var(--fg-secondary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
}
.eml-tab svg {
  font-size: var(--ico-md);
  color: var(--fg-muted);
}
.eml-tab:hover {
  background: var(--hover-surface);
}
.eml-tab.active {
  color: var(--accent);
}
.eml-tab.active svg {
  color: var(--accent);
}
.eml-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0; /* ds-ok: literal 1:1 z DS karty email-list.html */
}

/* ---- řádky ---- */
.eml-list {
  display: block;
}
.eml-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 40px;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-100);
  cursor: pointer;
  position: relative;
}
.eml-row.has-att {
  align-items: flex-start;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
.eml-row:hover {
  background: var(--surface-50);
  z-index: 1;
  /* ds-ok: stín 1:1 z DS karty email-list.html (true-overlay lift na hover) */
  box-shadow:
    inset 0 0 0 9999px transparent,
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 -1px 0 0 var(--surface-50);
}

/* control cluster */
.eml-ctrl {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-height: 20px;
}
.eml-row.has-att .eml-ctrl {
  align-self: flex-start;
}
.eml-ck {
  position: relative;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.eml-ck input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.eml-ck .ck {
  width: 16px;
  height: 16px;
  border-radius: 3px; /* ds-ok: literal 1:1 z DS karty email-list.html */
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  background: var(--surface-100);
  opacity: 0;
  transition:
    opacity 0.11s ease,
    background 110ms ease,
    border-color 110ms ease;
}
.eml-ck .ck svg {
  width: 12px;
  height: 12px;
  /* ds-ok: bílá fajfka na accent podkladu 1:1 z DS karty */
  stroke: #fff;
  stroke-width: 2.5;
  opacity: 0;
}
.eml-row:hover .eml-ck .ck,
.eml-ck input:checked + .ck {
  opacity: 1;
}
.eml-ck:hover .ck {
  border-color: var(--accent);
}
.eml-ck input:checked + .ck {
  background: var(--accent);
  border-color: var(--accent);
}
.eml-ck input:checked + .ck svg {
  opacity: 1;
}
.eml-ck input:focus-visible + .ck {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.eml-icobtn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  cursor: pointer;
  font-size: var(--ico-md);
  flex: none;
  padding: 0;
}
.eml-icobtn:hover {
  background: var(--active-surface);
  color: var(--fg);
}

/* sender */
.eml-sender {
  flex: none;
  width: 184px;
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 20px;
}
.eml-name {
  font: 500 13.5px/20px var(--font-sans);
  /* ds-ok: „o 10 % světlejší" přečtený ink 1:1 z DS karty (color-mix s bílou) */
  color: color-mix(in srgb, var(--ink-900) 90%, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eml-row.unread .eml-name {
  font-weight: 600;
  color: var(--ink-900);
}
.eml-count {
  font: 600 12px var(--font-mono);
  color: var(--fg-muted);
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* body */
.eml-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
}
.eml-line {
  display: block;
  font: 400 13.5px/20px var(--font-sans);
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eml-subj {
  font-weight: 500;
  /* ds-ok: přečtený ink 1:1 z DS karty (color-mix s bílou) */
  color: color-mix(in srgb, var(--ink-900) 90%, #fff);
}
.eml-row.unread .eml-subj {
  font-weight: 600;
  color: var(--ink-900);
}
.eml-snip {
  color: var(--fg-muted);
}

.eml-att {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.eml-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 28px;
  padding: 0 var(--sp-3) 0 var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-75);
  font: 500 12px var(--font-sans);
  color: var(--fg-secondary);
  max-width: 200px;
}
.eml-chip:hover {
  background: var(--hover-surface);
}
.eml-chip .ext {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px; /* ds-ok: literal 1:1 z DS karty email-list.html */
  display: grid;
  place-items: center;
  font: 600 7px var(--font-display);
  letter-spacing: 0.02em;
  /* ds-ok: bílý glyph na barevném tile 1:1 z DS karty */
  color: #fff;
}
.eml-chip .ext.xls {
  /* ds-ok: brand barva XLS tile 1:1 z DS karty */
  background: #1f7a4d;
}
.eml-chip .ext.pdf {
  background: var(--critical);
}
.eml-chip .fn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* trailing */
.eml-trail {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  min-width: 92px;
  min-height: 20px;
}
.eml-row.has-att .eml-trail {
  align-self: flex-start;
}
.eml-preicon {
  color: var(--fg-muted);
  font-size: var(--ico-sm);
  display: inline-flex;
}
.eml-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eml-date {
  font: 600 12px var(--font-mono);
  color: var(--fg-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.eml-row.unread .eml-date {
  color: var(--ink-900);
}
.eml-actions {
  display: none;
  align-items: center;
  gap: var(--sp-0);
}
.eml-row:hover .eml-meta {
  display: none;
}
.eml-row:hover .eml-actions {
  display: inline-flex;
}

/* ============================================================
   App nadstavba nad kartou (vědomá rozšíření, vizuálně v duchu DS):
   ============================================================ */

/* Ikony v řádcích jedou přes 1em konvenci karty (base rule `svg { width: 1em }`
   je v kartě globální; tady scoped, ať přebije width atribut inline glyphů).
   Taby používají <Icon> z @acrm/ui, který 1em default už má. */
.eml-icobtn svg,
.eml-preicon svg {
  width: 1em;
  height: 1em;
}

/* Hvězda (setMailFlags starred) — v ctrl clusteru dle anatomie karty
   („checkbox · hvězda · …"); mimo hover skrytá jako checkbox, zapnutá svítí. */
.eml-icobtn.eml-star {
  opacity: 0;
  transition: opacity 0.11s ease;
}
.eml-row:hover .eml-icobtn.eml-star,
.eml-icobtn.eml-star:focus-visible,
.eml-icobtn.eml-star.on {
  opacity: 1;
}
.eml-icobtn.eml-star.on {
  color: var(--pill-amber-ink);
}
.eml-icobtn.eml-star.on svg {
  fill: currentColor;
}

/* „Otevřeno" tracking odeslaného mailu — trailing indikátor vedle sponky. */
.eml-preicon.opened {
  color: var(--positive-ink);
}

/* Hlavička mailové sekce (titul + akce) — nad rámec karty; sdílí ji /posta
   a záložky E-maily (dřív v person-record.css). */
.eml-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  row-gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.eml-hd .t {
  font: var(--h1);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
}
.eml-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}
.eml-hd .btn {
  height: var(--control-h);
}