s and must not
* imply they're clickable. */
a.stat-tile:hover {
border-color: var(--color-accent);
text-decoration: none;
}
.stat-value {
font-size: var(--text-2xl, 1.75rem);
font-weight: 700;
line-height: 1;
}
.stat-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* Empty states — icon + headline + supporting copy + a primary CTA,
* centred. Replaces the bare one-liners. */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--sp-3);
padding: var(--sp-7) var(--sp-5);
}
.empty-state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent);
}
.empty-state h2 {
margin: 0;
font-size: var(--text-lg);
}
.empty-state p {
margin: 0;
max-width: 42ch;
}
/* Key-value rows (top referrers, etc.). */
.data-list {
list-style: none;
padding: 0;
margin: 0;
}
.data-list li {
padding: 8px 0;
border-bottom: 1px solid var(--color-border);
}
.data-list li:last-child {
border-bottom: 0;
}
/* Link-detail header: short-URL copy row + QR action. */
.account-header .short-url {
margin-top: var(--sp-3);
}
/* Destination-edit history — a compact change log instead of a wide
* two-URL table that never fits. Each entry stacks the timestamp over a
* from → to pair, both truncated. */
.history-list {
list-style: none;
padding: 0;
margin: 0;
}
.history-item {
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--color-border);
}
.history-item:last-child {
border-bottom: 0;
}
.history-when {
display: block;
font-size: var(--text-xs);
margin-bottom: 4px;
}
.history-change {
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--text-sm);
}
.history-change .truncate {
max-width: 100%;
}
.history-arrow {
color: var(--color-text-subtle);
line-height: 1;
}
/* My links — a list of link rows (modern dashboard pattern) instead of a
* flat 6-column table. Each row is one big click target to the detail
* page: short path + destination stacked on the left, stats + status +
* date on the right. */
.account-header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
.link-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.link-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.link-row:hover {
border-color: var(--color-accent);
}
/* The anchor fills the row; the action cluster (copy / open) sits outside
* it so the buttons are not nested inside an
(invalid + unclickable). */
.link-row-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex: 1;
min-width: 0;
text-decoration: none;
color: inherit;
}
.link-row-link:hover {
text-decoration: none;
}
/* Admin roster identity cell: one link wrapping the display name + the platform
id so both navigate to the detail page with a single tab stop (rather than
two separate links to the same page). The id keeps its muted .meta colour and
stays text-selectable for copy. */
.identity-link {
display: inline-flex;
flex-direction: column;
gap: 2px;
min-width: 0;
max-width: 100%;
text-decoration: none;
}
.identity-link:hover .truncate {
text-decoration: underline;
}
.link-row-actions {
display: flex;
align-items: center;
gap: var(--sp-1);
flex-shrink: 0;
}
.link-row-main {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.link-row-code {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-weight: 600;
color: var(--color-text);
}
.link-row-dest {
font-size: var(--text-sm);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.link-row-meta {
display: flex;
align-items: center;
gap: var(--sp-4);
flex-shrink: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.link-row-clicks strong {
color: var(--color-text);
}
@media (max-width: 640px) {
.link-row-link {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-2);
}
.link-row-meta {
gap: var(--sp-3);
}
.link-row-date {
display: none;
}
}
/* Square icon-only buttons (copy / open) on list rows. */
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
text-decoration: none;
transition: border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover,
.icon-btn:focus-visible {
/* Pin the background — these are