// =============================================================================
// Decent DS - Reusable UI components
// =============================================================================
@use 'tokens' as t;

// -----------------------------------------------------------------------------
// Card
// -----------------------------------------------------------------------------
.dc-card {
    background: var(--dc-bg-surface);
    border: 1px solid var(--dc-border-subtle);
    border-radius: t.$radius-lg;
    box-shadow: var(--dc-shadow-sm);
    overflow: hidden;
    transition: border-color t.$motion-fast t.$ease-out, box-shadow t.$motion-base t.$ease-out;
}
.dc-card:hover { border-color: var(--dc-border-default); }
.dc-card__header,
.dc-card__body,
.dc-card__footer {
    padding: t.$space-5;
}
.dc-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: t.$space-3;
    border-bottom: 1px solid var(--dc-border-subtle);
}
.dc-card__footer {
    border-top: 1px solid var(--dc-border-subtle);
    background: var(--dc-bg-inset);
}
.dc-card__title {
    font-size: t.$fs-16;
    font-weight: 600;
    margin: 0;
    color: var(--dc-text-primary);
}
.dc-card__subtitle {
    font-size: t.$fs-13;
    color: var(--dc-text-muted);
    margin: t.$space-1 0 0 0;
}

// Stat card
.dc-stat {
    padding: t.$space-5;
    background: var(--dc-bg-surface);
    border: 1px solid var(--dc-border-subtle);
    border-radius: t.$radius-lg;
    display: flex;
    flex-direction: column;
    gap: t.$space-2;
    min-height: 128px;
    position: relative;
    overflow: hidden;
}
.dc-stat__label { font-size: t.$fs-12; text-transform: uppercase; letter-spacing: .08em; color: var(--dc-text-muted); }
.dc-stat__value { font-size: t.$fs-30; font-weight: 700; color: var(--dc-text-primary); letter-spacing: -.02em; }
.dc-stat__delta {
    display: inline-flex; align-items: center; gap: t.$space-1;
    font-size: t.$fs-13; font-weight: 500;
}
.dc-stat__delta.is-positive { color: var(--dc-status-success); }
.dc-stat__delta.is-negative { color: var(--dc-status-danger); }

// -----------------------------------------------------------------------------
// Buttons
// -----------------------------------------------------------------------------
.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: t.$space-2;
    padding: t.$space-2 t.$space-4;
    border-radius: t.$radius-md;
    font-weight: 500;
    font-size: t.$fs-14;
    line-height: 1.2;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dc-text-primary);
    cursor: pointer;
    transition: background-color t.$motion-fast t.$ease-out,
                border-color t.$motion-fast t.$ease-out,
                transform t.$motion-fast t.$ease-out,
                box-shadow t.$motion-fast t.$ease-out;
    white-space: nowrap;
    text-decoration: none;
    min-height: 38px;
}
.dc-btn:disabled { opacity: .55; cursor: not-allowed; }
.dc-btn:not(:disabled):active { transform: translateY(1px); }

.dc-btn--primary {
    background: var(--dc-brand-primary);
    color: var(--dc-brand-primary-fg);
    box-shadow: var(--dc-shadow-sm);
}
.dc-btn--primary:hover { filter: brightness(.94); text-decoration: none; }

.dc-btn--secondary {
    background: var(--dc-bg-surface);
    color: var(--dc-text-primary);
    border-color: var(--dc-border-default);
}
.dc-btn--secondary:hover { background: var(--dc-bg-hover); text-decoration: none; }

.dc-btn--ghost { color: var(--dc-text-secondary); }
.dc-btn--ghost:hover { background: var(--dc-bg-hover); color: var(--dc-text-primary); text-decoration: none; }

.dc-btn--danger { background: var(--dc-status-danger); color: #fff; }
.dc-btn--danger:hover { filter: brightness(.94); text-decoration: none; }

.dc-btn--sm { padding: t.$space-1 t.$space-3; min-height: 32px; font-size: t.$fs-13; }
.dc-btn--lg { padding: t.$space-3 t.$space-5; min-height: 46px; font-size: t.$fs-16; }
.dc-btn--icon { padding: t.$space-2; min-width: 38px; }
.dc-btn--block { width: 100%; }

// -----------------------------------------------------------------------------
// Form controls
// -----------------------------------------------------------------------------
.dc-form-group { margin-bottom: t.$space-4; }
.dc-label {
    display: block;
    font-size: t.$fs-13;
    font-weight: 500;
    color: var(--dc-text-secondary);
    margin-bottom: t.$space-1;
}
.dc-label__required::after {
    content: '*';
    color: var(--dc-status-danger);
    margin-left: t.$space-1;
}
.dc-input, .dc-select, .dc-textarea {
    display: block;
    width: 100%;
    padding: t.$space-2 t.$space-3;
    font-size: t.$fs-14;
    line-height: 1.4;
    color: var(--dc-text-primary);
    background: var(--dc-bg-surface);
    border: 1px solid var(--dc-border-default);
    border-radius: t.$radius-md;
    transition: border-color t.$motion-fast t.$ease-out, box-shadow t.$motion-fast t.$ease-out;
    min-height: 40px;
}
.dc-textarea { min-height: 96px; resize: vertical; }
.dc-input:focus, .dc-select:focus, .dc-textarea:focus {
    outline: none;
    border-color: var(--dc-brand-primary);
    box-shadow: var(--dc-focus-ring);
}
.dc-input[aria-invalid="true"] {
    border-color: var(--dc-status-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
}
.dc-hint  { font-size: t.$fs-12; color: var(--dc-text-muted); margin-top: t.$space-1; }
.dc-error { font-size: t.$fs-12; color: var(--dc-status-danger); margin-top: t.$space-1; }

// -----------------------------------------------------------------------------
// Table
// -----------------------------------------------------------------------------
.dc-table-wrap {
    background: var(--dc-bg-surface);
    border: 1px solid var(--dc-border-subtle);
    border-radius: t.$radius-lg;
    overflow: hidden;
}
.dc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: t.$fs-14;
}
.dc-table th, .dc-table td {
    padding: t.$space-3 t.$space-4;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--dc-border-subtle);
}
.dc-table th {
    font-weight: 600;
    color: var(--dc-text-secondary);
    background: var(--dc-bg-inset);
    font-size: t.$fs-13;
}
.dc-table tbody tr:last-child td { border-bottom: 0; }
.dc-table tbody tr:hover { background: var(--dc-bg-hover); }

// -----------------------------------------------------------------------------
// Badge / Chip
// -----------------------------------------------------------------------------
.dc-badge {
    display: inline-flex;
    align-items: center;
    gap: t.$space-1;
    padding: 2px t.$space-2;
    font-size: t.$fs-12;
    font-weight: 500;
    border-radius: t.$radius-pill;
    background: var(--dc-bg-inset);
    color: var(--dc-text-secondary);
    border: 1px solid var(--dc-border-subtle);
}
.dc-badge--success { color: var(--dc-status-success); border-color: rgba(22, 163, 74, .28); background: rgba(22, 163, 74, .10); }
.dc-badge--info    { color: var(--dc-status-info);    border-color: rgba(37, 99, 235, .28); background: rgba(37, 99, 235, .10); }
.dc-badge--warning { color: var(--dc-status-warning); border-color: rgba(217, 119, 6, .28); background: rgba(217, 119, 6, .10); }
.dc-badge--danger  { color: var(--dc-status-danger);  border-color: rgba(220, 38, 38, .28); background: rgba(220, 38, 38, .10); }

// -----------------------------------------------------------------------------
// Alert
// -----------------------------------------------------------------------------
.dc-alert {
    padding: t.$space-3 t.$space-4;
    border-radius: t.$radius-md;
    background: var(--dc-bg-surface);
    border: 1px solid var(--dc-border-subtle);
    display: flex;
    gap: t.$space-3;
    align-items: flex-start;
}
.dc-alert--info    { border-color: rgba(37, 99, 235, .28); background: rgba(37, 99, 235, .07); }
.dc-alert--success { border-color: rgba(22, 163, 74, .28); background: rgba(22, 163, 74, .07); }
.dc-alert--warning { border-color: rgba(217, 119, 6, .28); background: rgba(217, 119, 6, .07); }
.dc-alert--danger  { border-color: rgba(220, 38, 38, .28); background: rgba(220, 38, 38, .07); }

// -----------------------------------------------------------------------------
// Breadcrumbs
// -----------------------------------------------------------------------------
.dc-breadcrumbs {
    display: flex;
    align-items: center;
    gap: t.$space-2;
    font-size: t.$fs-13;
    color: var(--dc-text-muted);
    margin-bottom: t.$space-3;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}
.dc-breadcrumbs a { color: var(--dc-text-muted); }
.dc-breadcrumbs a:hover { color: var(--dc-text-primary); }
.dc-breadcrumbs__sep { color: var(--dc-text-muted); }
.dc-breadcrumbs__current { color: var(--dc-text-primary); font-weight: 500; }

// -----------------------------------------------------------------------------
// Skeleton loading
// -----------------------------------------------------------------------------
.dc-skeleton {
    background: linear-gradient(90deg, var(--dc-bg-inset) 0%, var(--dc-bg-hover) 50%, var(--dc-bg-inset) 100%);
    background-size: 200% 100%;
    animation: dc-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: t.$radius-sm;
    color: transparent;
}
@keyframes dc-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

// -----------------------------------------------------------------------------
// Empty state
// -----------------------------------------------------------------------------
.dc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: t.$space-12 t.$space-6;
    color: var(--dc-text-muted);
    gap: t.$space-3;
}
.dc-empty__title { color: var(--dc-text-primary); margin: 0; }