/* Echo UI: cards, tables, lists and metrics. */
.ui-card { border: 1px solid var(--ui-color-border); background: var(--ui-color-surface); border-radius: var(--ui-radius); padding: var(--ui-card-padding); margin-bottom: var(--ui-space-5); box-shadow: var(--ui-shadow-surface), inset 0 1px 0 var(--ui-color-edge-highlight); }
[data-theme].ui-card { color: var(--ui-color-text); }
.ui-card,
.ui-card--subtle,
.ui-alert.ui-alert--danger { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.ui-card--clickable:hover { border-color: rgba(var(--ui-primary-rgb), .38); }
.ui-card--subtle { background: var(--ui-color-surface-muted); border-color: var(--ui-color-border-strong); box-shadow: var(--ui-shadow-inset), inset 0 1px 0 var(--ui-color-edge-highlight); }
.ui-card--clickable { display: block; color: inherit; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.ui-card--clickable:hover { border-color: rgba(var(--ui-primary-rgb), .4); background: var(--ui-color-surface-raised); box-shadow: var(--ui-shadow-raised), inset 0 1px 0 var(--ui-color-edge-highlight); transform: translateY(-2px); }
.ui-card--success { border-color: rgba(22, 163, 74, .45); background: rgba(22, 163, 74, .08); }
.ui-card--danger { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .08); }
.ui-card--success-outline { border-color: rgba(22, 163, 74, .45); }
.ui-card--danger-outline { border-color: rgba(239, 68, 68, .45); }
.ui-card--tabs-shell { background: transparent; border-color: transparent; box-shadow: none; }
.ui-card--tabs-shell:hover,
.ui-card--tabs-shell.ui-card--clickable:hover,
.ui-card--tabs-shell:focus-within { border-color: transparent; background: transparent; box-shadow: none; }
.ui-table-wrap { overflow: auto; border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius); background: var(--ui-color-surface); box-shadow: var(--ui-shadow-control), inset 0 1px 0 var(--ui-color-edge-highlight); }
.ui-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: var(--ui-radius); background: var(--ui-color-surface); }
.ui-table th,
.ui-table td { padding: var(--ui-table-padding-block) var(--ui-table-padding-inline); border-bottom: 1px solid var(--ui-color-border); text-align: left; font-size: var(--ui-font-size-table); }
.ui-table th { color: var(--ui-color-text-muted-strong); font-weight: var(--ui-font-weight-bold); background: var(--ui-color-surface-muted); box-shadow: inset 0 -1px 0 var(--ui-color-border); }
.ui-table tr:nth-child(even) td { background: rgba(18, 24, 38, .02); }
.ui-table tr:hover td { background: rgba(var(--ui-primary-rgb), .04); }
.ui-table-wrap table tr:hover td { background: rgba(0, 108, 146, .07); }
[data-theme="dark"] .ui-table-wrap table tr:hover td { background: rgba(0, 188, 237, .12); }
.ui-list { display: flex; flex-direction: column; gap: var(--ui-space-3); }
.ui-list-item { display: block; padding: var(--ui-space-5) var(--ui-space-6); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-sm); background: var(--ui-color-surface); box-shadow: var(--ui-shadow-control), inset 0 1px 0 var(--ui-color-edge-highlight); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.ui-list-item:hover { border-color: rgba(var(--ui-primary-rgb), .45); background: var(--ui-color-surface-raised); box-shadow: var(--ui-shadow-raised), inset 0 1px 0 var(--ui-color-edge-highlight); }
.ui-stat { min-width: 0; padding: var(--ui-space-5); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-sm); background: var(--ui-color-surface-raised); box-shadow: var(--ui-shadow-control), inset 0 1px 0 var(--ui-color-edge-highlight); }
.ui-kv { display: grid; grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr); gap: var(--ui-space-3) var(--ui-space-5); }

@media (prefers-reduced-motion: reduce) {
  .ui-card--clickable,
  .ui-card--clickable:hover,
  .ui-list-item,
  .ui-list-item:hover { transform: none; }
}