// =============================================================================
// Decent DS - Utility helpers not covered by Bootstrap
// =============================================================================
@use 'tokens' as t;

.dc-text-muted     { color: var(--dc-text-muted) !important; }
.dc-text-secondary { color: var(--dc-text-secondary) !important; }
.dc-text-primary   { color: var(--dc-text-primary) !important; }
.dc-text-mono      { font-family: t.$font-mono !important; }
.dc-text-numeric   { font-variant-numeric: tabular-nums; }

.dc-bg-surface { background: var(--dc-bg-surface) !important; }
.dc-bg-inset   { background: var(--dc-bg-inset) !important; }
.dc-bg-canvas  { background: var(--dc-bg-canvas) !important; }

.dc-border-top    { border-top: 1px solid var(--dc-border-subtle); }
.dc-border-bottom { border-bottom: 1px solid var(--dc-border-subtle); }

.dc-radius-sm { border-radius: t.$radius-sm !important; }
.dc-radius-md { border-radius: t.$radius-md !important; }
.dc-radius-lg { border-radius: t.$radius-lg !important; }
.dc-radius-xl { border-radius: t.$radius-xl !important; }

.dc-shadow-sm { box-shadow: var(--dc-shadow-sm) !important; }
.dc-shadow-md { box-shadow: var(--dc-shadow-md) !important; }
.dc-shadow-lg { box-shadow: var(--dc-shadow-lg) !important; }

.dc-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sr-only  { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.dc-hstack { display: flex; align-items: center; gap: t.$space-3; }
.dc-vstack { display: flex; flex-direction: column; gap: t.$space-3; }
.dc-stack-tight { gap: t.$space-2; }
.dc-stack-loose { gap: t.$space-5; }

.dc-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: t.$space-2;
}

.dc-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: t.$space-4;
}