/* ══════════════════════════════════════════
   Deal Tile Card — shared between /deals (list) and /dashboard.
   Render with window.DealTile.buildTile(deal, ctx).
   ══════════════════════════════════════════ */

/* Tile Grid */
.dtile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-bottom:var(--df-space-2); }
/* Flex column so the footer is always glued to the bottom even when
   the grid stretches the card to match its row's tallest sibling. */
.dtile { display:flex; flex-direction:column; background:var(--df-bg-surface); border:1px solid var(--df-border); border-radius:12px; overflow:hidden; transition:all 0.3s cubic-bezier(0.22,1,0.36,1); cursor:pointer; }
.dtile-body { flex:1 1 auto; padding:20px 24px 16px; }
.dtile:hover { box-shadow:0 1px 2px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.04); transform:translateY(-2px); border-color:var(--df-accent-border); }

/* Accent Bar */
.dtile-accent { height:3px; width:100%; }
.dtile-accent--gold { background:linear-gradient(90deg,var(--df-accent),#fdba4d); }
.dtile-accent--dark { background:linear-gradient(90deg,var(--df-text-primary),rgba(25,25,24,0.5)); }
.dtile-accent--muted { background:linear-gradient(90deg,var(--df-text-muted),rgba(25,25,24,0.35)); }

/* Header */
.dtile-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.dtile-avatar { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; color:#fff; flex-shrink:0; overflow:hidden; }
.dtile-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.dtile-avatar--gold { background:linear-gradient(135deg,#e89a1f,#fcaa2d); }
.dtile-avatar--dark { background:linear-gradient(135deg,#2a2a2a,#444); }
.dtile-avatar--muted { background:linear-gradient(135deg,rgba(25,25,24,0.5),rgba(25,25,24,0.35)); }
/* Title block reserves enough height for a 2-line target + 1-line code
   so the rows below (EV, metrics, team) stay aligned across all cards in a row. */
.dtile-title-block { min-width:0; flex:1; min-height:60px; }
.dtile-name { font-size:15px; font-weight:600; color:var(--df-text-primary); line-height:1.3; letter-spacing:-0.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
.dtile-status-tag { display:inline-flex; align-self:flex-start; flex-shrink:0; padding:4px 10px; border-radius:999px; font-size:9.5px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; white-space:nowrap; }
.dtile-status-tag--gold { background:rgba(252,170,45,0.1); color:var(--df-accent); }
.dtile-status-tag--dark { background:rgba(25,25,24,0.06); color:var(--df-text-secondary); }
.dtile-status-tag--muted { background:rgba(25,25,24,0.05); color:var(--df-text-muted); }
.dtile-subtitle { font-size:12px; color:var(--df-text-secondary); margin-top:3px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* EV hero block — big mono number + deal-type subtitle */
.dtile-ev { font-family:var(--df-font-mono); font-size:24px; font-weight:800; color:var(--df-text-primary); letter-spacing:-0.02em; margin-bottom:2px; }
.dtile-ev-range { font-size:11px; color:var(--df-text-tertiary); margin-bottom:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dtile-ev-type { font-weight:600; }

/* Metrics row (Progress / Data Room / Deal Docs) */
.dtile-metrics { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--df-border-light); border-radius:8px; overflow:hidden; margin-bottom:12px; }
/* 2-row grid: label on top, value vertically centered in remaining space.
   Value is single-line with ellipsis; title attribute fires the tooltip. */
.dtile-metric { padding:9px 10px; border-right:1px solid var(--df-border-light); background:var(--df-bg-elevated); display:grid; grid-template-rows:auto 1fr; row-gap:4px; min-height:60px; min-width:0; }
.dtile-metric:last-child { border-right:none; }
.dtile-metric__label { grid-row:1; font-size:9px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; color:var(--df-text-tertiary); }
.dtile-metric__value { grid-row:2; align-self:center; font-size:15px; font-weight:700; color:var(--df-text-primary); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.dtile-metric--link { cursor:pointer; transition:background var(--df-duration-fast); }
.dtile-metric--link:hover { background:var(--df-bg-hover); }
.dtile-metric--link:hover .dtile-metric__value { color:var(--df-accent); }
.dtile-metric--link:hover .dtile-metric__value i { color:var(--df-accent) !important; }

/* Deal Team panel — always expanded, no toggle. */
.dtile-detail { border:1px solid var(--df-border-light); border-radius:9px; overflow:hidden; }
.dtile-detail-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--df-bg-elevated); user-select:none; }
.dtile-detail-header span:first-child { font-size:9.5px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; color:var(--df-text-tertiary); }
.dtile-detail-badge { font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:5px; border:1px solid var(--df-border); color:var(--df-text-muted); background:var(--df-bg-surface); }
.dtile-detail-body { display:flex; gap:8px; padding:10px 12px; flex-wrap:wrap; }
.dtile-team-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:10px; color:#fff; overflow:hidden; }
.dtile-team-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.dtile-team-avatar--more { background:var(--df-bg-surface); border:1px dashed var(--df-border); color:var(--df-text-tertiary); cursor:default; font-weight:700; font-size:10px; }
.dtile-team-name { font-size:9px; color:var(--df-text-secondary); text-align:center; margin-top:2px; }

/* Footer — 3 items: industry tag, creator meta, View Deal */
.dtile-foot { display:flex; align-items:center; gap:12px; padding:10px 24px; background:var(--df-bg-elevated); border-top:1px solid var(--df-border-light); }
.dtile-foot-tag { font-size:11px; color:var(--df-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.dtile-link { font-size:11px; font-weight:600; color:var(--df-accent); text-decoration:none; transition:color 0.2s; display:flex; align-items:center; gap:4px; flex-shrink:0; white-space:nowrap; margin-left:auto; }
.dtile-link:hover { color:var(--df-accent-bright); }
.dtile-link i { font-size:0.5rem; transition:transform 0.2s; }
.dtile:hover .dtile-link i { transform:translateX(3px); }

/* Footer creator line */
.dtile-meta { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; line-height:1; color:var(--df-text-muted); white-space:nowrap; cursor:default; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.dtile-meta i { font-size:10.5px; line-height:1; opacity:0.7; flex-shrink:0; }
.dtile-meta__who { color:var(--df-text-secondary); font-weight:600; }

/* States */
.dtile.hidden { display:none; }

/* Loading skeleton */
.dtile-skel { background:linear-gradient(90deg,var(--df-bg-elevated) 25%,var(--df-bg-surface) 50%,var(--df-bg-elevated) 75%); background-size:200% 100%; animation:dtile-sk 1.4s ease infinite; border-radius:12px; height:280px; }
@keyframes dtile-sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Responsive grid */
@media(max-width:1200px) { .dtile-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px)  { .dtile-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px)  { .dtile-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════
   Deal Document tile — variant of .dtile used on /dealdraft/documents.
   Replaces the team panel with a "context strip" and uses a FA icon
   inside the avatar instead of company initials.
   ══════════════════════════════════════════ */

.dtile--doc .dtile-avatar i { font-size: 16px; color: #fff; }

/* On document cards the DOCUMENT NAME is the primary anchor (not the deal
   name), so promote it to a larger, heavier hero title. Type/project/company
   live in the smaller .dtile-subtitle line below. */
.dtile--doc .dtile-name { font-size: 17px; font-weight: 700; -webkit-line-clamp: 2; }
.dtile--doc .dtile-title-block { min-height: 44px; }

/* The project link now lives inline in the demoted .dtile-subtitle. Only the
   text itself reacts to clicks - the surrounding row stays inert. */
.dtile--doc .dtile-subtitle .deal-link { cursor: pointer; color: var(--df-text-secondary); }
.dtile--doc .dtile-subtitle .deal-link:hover { text-decoration: underline; color: var(--df-accent-dim); }

.dtile-context-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--df-border-light);
  border-radius: 9px;
  padding: 8px 12px;
  background: var(--df-bg-elevated);
}
.dtile-context-strip__author {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--df-text-secondary); font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dtile-context-strip__author img,
.dtile-context-strip__author .ini {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  object-fit: cover; flex-shrink: 0;
}
.dtile-context-strip__chips { display: flex; gap: 6px; flex-shrink: 0; }
.dtile-context-strip__chip {
  font-size: 9.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--df-bg-surface);
  border: 1px solid var(--df-border-light);
  color: var(--df-text-tertiary);
  white-space: nowrap;
}

/* Footer action buttons (Share / Delete) — fade in on hover */
.dtile--doc .dtile-foot__actions {
  display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s;
  margin-left: 12px;
}
.dtile--doc:hover .dtile-foot__actions { opacity: 1; }
.dtile--doc .dtile-foot__action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--df-border); background: var(--df-bg-surface);
  color: var(--df-text-tertiary); transition: all 0.15s;
}
.dtile--doc .dtile-foot__action:hover {
  border-color: var(--df-accent-border); color: var(--df-text-secondary);
}
.dtile--doc .dtile-foot__action--delete:hover {
  border-color: var(--df-red, #dc2626); color: var(--df-red, #dc2626);
}

/* Generating accent uses a slow pulse so users feel something is in flight */
.dtile--doc.is-generating .dtile-accent {
  animation: doc-accent-pulse 1.8s ease-in-out infinite;
}
@keyframes doc-accent-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Disabled cards (Generating / Failed) do not lift on hover */
.dtile--doc.is-disabled { opacity: 0.72; cursor: default; }
.dtile--doc.is-disabled:hover {
  transform: none; box-shadow: none; border-color: var(--df-border);
}

/* ══════════════════════════════════════════
   Filter Bar / Pills / Search
   Shared between /deals and /dealdraft/documents.
   ══════════════════════════════════════════ */
.dtile-filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:var(--df-space-5); }
.dtile-filter-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--df-text-muted); margin-right:4px; }
.dtile-pills { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.dtile-pill { padding:5px 12px; border-radius:999px; border:1px solid var(--df-border); background:var(--df-bg-surface); color:var(--df-text-secondary); font-size:11px; font-weight:600; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.dtile-pill:hover { filter:brightness(0.95); }
/* Stage-color override: per-pill inline style sets color/border/bg
   to match the section colors below. Inactive pills get a faint tint;
   active pills get a stronger tint of the same stage color. */
.dtile-pill[data-stage-label] { color:var(--df-text-secondary); }
.dtile-pill[data-stage-label].is-active { color:#fff; }
.dtile-pill__count { font-family:var(--df-font-mono); font-size:10px; color:inherit; opacity:0.65; }
/* Empty-count stage pills are hidden from the inline row; they only
   surface in the overflow popover (or as the active selection). */
.dtile-pills .dtile-pill--empty { display:none; }

/* Three-dot kebab + popover for the empty stages. */
.dtile-pill-overflow { position:relative; display:inline-flex; }
.dtile-pill--toggle { padding:5px 10px; color:var(--df-text-tertiary); }
.dtile-pill--toggle i { font-size:11px; }
.dtile-pill--toggle:hover { color:var(--df-text-primary); border-color:var(--df-accent-border); }
.dtile-pill-overflow.open .dtile-pill--toggle { background:var(--df-accent-subtle); border-color:var(--df-accent-border); color:var(--df-accent-dim); }
.dtile-empty-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:180px; background:var(--df-bg-surface); border:1px solid var(--df-border); border-radius:7px; box-shadow:0 8px 24px rgba(25,25,24,0.12); padding:4px 0; z-index:100; display:none; max-height:280px; overflow-y:auto; }
.dtile-pill-overflow.open .dtile-empty-menu { display:block; }
.dtile-empty-menu__hint { padding:6px 12px; font-size:9px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--df-text-muted); border-bottom:1px solid var(--df-border-light); margin-bottom:2px; }
.dtile-empty-menu__item { padding:7px 12px; font-size:11.5px; color:var(--df-text-secondary); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; transition:background 0.12s; }
.dtile-empty-menu__item:hover { background:var(--df-accent-subtle); color:var(--df-accent-dim); }
.dtile-empty-menu__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dtile-empty-menu__count { font-family:var(--df-font-mono); font-size:10px; color:var(--df-text-muted); }
.dtile-toolbar-type     { width:200px; }
.dtile-toolbar-industry { width:200px; }
/* Match search input height (~29px) and corner radius (7px) so the row aligns. */
.dtile-filter-bar .dtile-toolbar-type .cs__trigger,
.dtile-filter-bar .dtile-toolbar-type .cs__dropdown,
.dtile-filter-bar .dtile-toolbar-industry .cs__trigger,
.dtile-filter-bar .dtile-toolbar-industry .cs__dropdown { border-radius:7px; }
.dtile-filter-bar .dtile-toolbar-type .cs__trigger,
.dtile-filter-bar .dtile-toolbar-industry .cs__trigger { padding:7px 12px; font-size:11.5px; }
.dtile-search { position:relative; width:180px; flex:0 0 auto; }
.dtile-search svg { position:absolute; left:9px; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke:var(--df-text-muted); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.dtile-search input { width:100%; background:var(--df-bg-surface); border:1px solid var(--df-border); border-radius:7px; padding:7px 26px 7px 32px; font-size:11.5px; font-family:var(--df-font-body); color:var(--df-text-primary); outline:none; transition:border-color 0.2s; }
.dtile-search input:focus { border-color:var(--df-accent); }
.dtile-search input::placeholder { color:var(--df-text-muted); }
/* Clear (x) button - shown only when the input has a value */
.dtile-search__clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:18px; height:18px; display:none; align-items:center; justify-content:center; border:none; background:transparent; cursor:pointer; color:var(--df-text-muted); font-size:0.7rem; border-radius:50%; padding:0; transition:background 0.15s, color 0.15s; }
.dtile-search__clear:hover { background:var(--df-bg-hover); color:var(--df-text-primary); }
.dtile-search input:not(:placeholder-shown) ~ .dtile-search__clear { display:flex; }

/* ── Skeleton placeholder tiles ──
   Used during initial data load on /deals before renderTiles() runs.
   Outer shape mirrors .dtile so the swap to real tiles doesn't shift
   the surrounding layout. Auto-cleared the moment the host script
   sets the container's innerHTML. */
.dtile-skel-card { display:flex; flex-direction:column; background:var(--df-bg-surface); border:1px solid var(--df-border); border-radius:12px; overflow:hidden; }
.dtile-skel-body { flex:1 1 auto; padding:20px 24px 16px; }
.dtile-skel-foot { background:var(--df-bg-elevated); border-top:1px solid var(--df-border-light); padding:12px 24px; }

.dtile-skel-row { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.dtile-skel-stack { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding-top:4px; }
.dtile-skel-avatar { width:42px; height:42px; border-radius:50%; flex-shrink:0; }
.dtile-skel-line { height:10px; border-radius:5px; }
.dtile-skel-line--w70 { width:70%; }
.dtile-skel-line--w50 { width:50%; }
.dtile-skel-line--w40 { width:40%; }
.dtile-skel-line--ev { height:22px; width:55%; margin:6px 0; border-radius:6px; }

.dtile-skel-metrics { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--df-border-light); border-radius:8px; overflow:hidden; margin-bottom:12px; }
.dtile-skel-metric { background:var(--df-bg-elevated); padding:9px 10px; min-height:60px; display:flex; flex-direction:column; gap:8px; justify-content:center; border-right:1px solid var(--df-border-light); }
.dtile-skel-metric:last-child { border-right:none; }

.dtile-skel-detail { border:1px solid var(--df-border-light); border-radius:9px; overflow:hidden; }
.dtile-skel-detail-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--df-bg-elevated); }
.dtile-skel-detail-body { display:flex; gap:8px; padding:10px 12px; }
.dtile-skel-team-dot { width:32px; height:32px; border-radius:50%; }

/* Animated gradient sweep on every gray block inside a skeleton card. */
.dtile-skel-card .dtile-skel-line,
.dtile-skel-card .dtile-skel-avatar,
.dtile-skel-card .dtile-skel-team-dot {
  background: linear-gradient(90deg, rgba(25,25,24,0.05) 0%, rgba(25,25,24,0.1) 50%, rgba(25,25,24,0.05) 100%);
  background-size: 200% 100%;
  animation: dtile-skel-shimmer 1.4s ease-in-out infinite;
}

@keyframes dtile-skel-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dtile-skel-card .dtile-skel-line,
  .dtile-skel-card .dtile-skel-avatar,
  .dtile-skel-card .dtile-skel-team-dot { animation: none; background: rgba(25,25,24,0.07); }
}