/* ══════════════════════════════════════════ Tile Card — list/browse page (style-guide §4 floor-tile layout). Ported verbatim from magnumweb/public/css/dtile.css with the --df-* tokens swapped for --lc-* and the magnum-specific gold variants removed (dimension colors come via inline style:background from the per-dimension palette in §4). ══════════════════════════════════════════ */ /* Tile Grid */ .dtile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-bottom:var(--lc-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(--lc-bg-surface); border:1px solid var(--lc-border); border-radius:12px; overflow:hidden; transition:all 0.3s cubic-bezier(0.22,1,0.36,1); cursor:pointer; text-decoration:none; color:inherit; } .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(--lc-accent-border); } /* Accent Bar (color set per-dimension via inline style:background) */ .dtile-accent { height:3px; width:100%; } /* 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; } /* Title block reserves enough height for a 2-line target + 1-line code so the rows below 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(--lc-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-subtitle { font-size:12px; color:var(--lc-text-secondary); margin-top:3px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Primary metric hero block — big mono number + subtitle */ .dtile-ev { font-family:var(--lc-font-mono); font-size:24px; font-weight:800; color:var(--lc-text-primary); letter-spacing:-0.02em; margin-bottom:2px; } .dtile-ev-range { font-size:11px; color:var(--lc-text-tertiary); margin-bottom:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dtile-ev-type { font-weight:600; } /* Mini-metrics row (3 inline KPI cells) */ .dtile-metrics { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--lc-border-light); border-radius:8px; overflow:hidden; margin-bottom:12px; } .dtile-metric { padding:9px 10px; border-right:1px solid var(--lc-border-light); background:var(--lc-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(--lc-text-tertiary); } .dtile-metric__value { grid-row:2; align-self:center; font-size:15px; font-weight:700; color:var(--lc-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(--lc-duration-fast); } .dtile-metric--link:hover { background:var(--lc-bg-hover); } .dtile-metric--link:hover .dtile-metric__value { color:var(--lc-accent); } /* Detail card (team or related entities) — always expanded */ .dtile-detail { border:1px solid var(--lc-border-light); border-radius:9px; overflow:hidden; } .dtile-detail-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--lc-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(--lc-text-tertiary); } .dtile-detail-badge { font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:5px; border:1px solid var(--lc-border); color:var(--lc-text-muted); background:var(--lc-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(--lc-bg-surface); border:1px dashed var(--lc-border); color:var(--lc-text-tertiary); cursor:default; font-weight:700; font-size:10px; } .dtile-team-name { font-size:9px; color:var(--lc-text-secondary); text-align:center; margin-top:2px; } /* ── Footer: creator strip (left) + actions (right) — style-guide §4 ── */ .dtile-foot { display:flex; align-items:center; gap:12px; padding:10px 24px; background:var(--lc-bg-elevated); border-top:1px solid var(--lc-border-light); } .dtile-foot-tag { font-size:11px; color:var(--lc-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .dtile-link { font-size:11px; font-weight:600; color:var(--lc-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(--lc-accent-bright); } .dtile-link i { font-size:0.5rem; transition:transform 0.2s; } .dtile:hover .dtile-link i { transform:translateX(3px); } /* Footer creator strip (lucia: avatar + name + time always visible) */ .dtile-creator { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; line-height:1; color:var(--lc-text-muted); min-width:0; overflow:hidden; flex:0 1 auto; } .dtile-creator__avatar { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:8.5px; font-weight:700; flex-shrink:0; overflow:hidden; } .dtile-creator__avatar img { width:100%; height:100%; object-fit:cover; display:block; } .dtile-creator__name { color:var(--lc-text-secondary); font-weight:600; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dtile-creator__time { color:var(--lc-text-muted); white-space:nowrap; } /* Delete action button — always visible per §4 (not hover-revealed) */ .dtile-action { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; border:1px solid var(--lc-border); background:var(--lc-bg-surface); color:var(--lc-text-tertiary); cursor:pointer; transition:all 0.15s; padding:0; font-size:11px; flex-shrink:0; } .dtile-action:hover { background:var(--lc-bg-hover); color:var(--lc-text-primary); } .dtile-action--danger:hover { background:rgba(220,38,38,0.08); border-color:rgba(220,38,38,0.25); color:#dc2626; } /* States */ .dtile.hidden { display:none; } /* Loading skeleton */ .dtile-skel { background:linear-gradient(90deg,var(--lc-bg-elevated) 25%,var(--lc-bg-surface) 50%,var(--lc-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:600px) { .dtile-grid { grid-template-columns:1fr; } } /* Top stats row uses the global .lc-kpis + .lc-kpi pattern from app-shell.css (the same one Compliance Dashboard uses). Do not add a tile-specific stats variant here — style-guide §4 picks lc-kpis as the canonical KPI row. */ /* ══════════════════════════════════════════ DIMENSION SECTION HEADER (per-dimension grouping) ══════════════════════════════════════════ */ .dtile-section-header { display:flex; align-items:center; gap:10px; padding:var(--lc-space-5) 0 var(--lc-space-3); user-select:none; cursor:pointer; border-top:1px solid var(--lc-border-light); margin-top:var(--lc-space-4); } .dtile-section-header:hover .dtile-section-title { opacity:0.8; } .dtile-section-chevron { font-size:10px; color:var(--lc-text-muted); transition:transform 0.25s; } .dtile-section-header.collapsed .dtile-section-chevron { transform:rotate(-90deg); } .dtile-grid.collapsed { display:none; } .dtile-section-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; } .dtile-section-title { font-size:12px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; } .dtile-section-count { display:inline-flex; align-items:center; font-family:var(--lc-font-mono); font-size:10px; font-weight:600; color:var(--lc-text-tertiary); background:var(--lc-bg-surface); border:1px solid var(--lc-border-light); padding:1px 8px; border-radius:999px; line-height:1.5; margin-left:6px; } /* ══════════════════════════════════════════ FILTER BAR (stage pills + search + LcSelect dropdowns) ══════════════════════════════════════════ */ .dtile-filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:var(--lc-space-5); } .dtile-filter-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--lc-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(--lc-border); background:var(--lc-bg-surface); color:var(--lc-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); } .dtile-pill[data-stage-label] { color:var(--lc-text-secondary); } .dtile-pill[data-stage-label].is-active { color:#fff; } .dtile-pill__count { font-family:var(--lc-font-mono); font-size:10px; color:inherit; opacity:0.65; } /* Empty-dimension overflow (style-guide §4): Dimensions whose count is 0 collapse into a 3-dot kebab so the row stays scannable. Click the kebab to open a popover listing them. */ .dtile-pill-overflow { position:relative; display:inline-flex; } .dtile-pill--toggle { padding:5px 10px; color:var(--lc-text-tertiary); } .dtile-pill--toggle i { font-size:11px; } .dtile-pill--toggle:hover { color:var(--lc-text-primary); border-color:var(--lc-accent-border); } .dtile-pill-overflow.open .dtile-pill--toggle { background:var(--lc-accent-subtle); border-color:var(--lc-accent-border); color:var(--lc-accent-dim); } .dtile-empty-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:200px; background:var(--lc-bg-surface); border:1px solid var(--lc-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(--lc-text-muted); border-bottom:1px solid var(--lc-border-light); margin-bottom:2px; } .dtile-empty-menu__item { padding:7px 12px; font-size:11.5px; color:var(--lc-text-secondary); cursor:pointer; display:flex; align-items:center; gap:8px; transition:background 0.12s; } .dtile-empty-menu__item:hover { background:var(--lc-accent-subtle); color:var(--lc-accent-dim); } .dtile-empty-menu__dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .dtile-empty-menu__label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dtile-empty-menu__count { font-family:var(--lc-font-mono); font-size:10px; color:var(--lc-text-muted); margin-left:auto; } .dtile-search { position:relative; width:220px; flex:0 0 auto; } .dtile-search i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--lc-text-muted); font-size:0.7rem; pointer-events:none; } .dtile-search input { width:100%; background:var(--lc-bg-surface); border:1px solid var(--lc-border); border-radius:7px; padding:7px 26px 7px 28px; font-size:11.5px; font-family:inherit; color:var(--lc-text-primary); outline:none; transition:border-color 0.2s; line-height:1.4; } .dtile-search input:focus { border-color:var(--lc-accent); } .dtile-search input::placeholder { color:var(--lc-text-muted); } .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(--lc-text-muted); font-size:0.7rem; border-radius:50%; padding:0; transition:background 0.15s, color 0.15s; } .dtile-search__clear:hover { background:var(--lc-bg-hover); color:var(--lc-text-primary); } .dtile-search input:not(:placeholder-shown) ~ .dtile-search__clear { display:flex; } /* LcSelect toolbar dropdowns (Type / Industry filters in .dtile-filter-bar). The