/* ============================================================
   TimeKeeper Admin — Utility Classes
   CSP-safe replacement for inline styles (style-src 'self').
   Prefix: tk- to avoid collisions with legacy admin.css.
   ============================================================ */

/* ── Layout: grids ── */
.tk-grid-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}
.tk-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}
.tk-grid-swatch {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
}
.tk-grid-split {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 900px) {
    .tk-grid-split { grid-template-columns: 1fr; }
}

/* ── Layout: flex ── */
.tk-flex { display: flex; }
.tk-flex-col { display: flex; flex-direction: column; }
.tk-inline { display: inline-flex; }
.tk-items-center { align-items: center; }
.tk-items-end { align-items: flex-end; }
.tk-items-start { align-items: flex-start; }
.tk-justify-center { justify-content: center; }
.tk-justify-between { justify-content: space-between; }
.tk-justify-end { justify-content: flex-end; }
.tk-wrap { flex-wrap: wrap; }
.tk-flex-1 { flex: 1; min-width: 0; }
.tk-gap-1 { gap: var(--space-1); }
.tk-gap-2 { gap: var(--space-2); }
.tk-gap-3 { gap: var(--space-3); }
.tk-gap-4 { gap: var(--space-4); }
.tk-gap-5 { gap: var(--space-5); }

/* ── Spacing ── */
.tk-mb-0 { margin-bottom: 0; }
.tk-mb-2 { margin-bottom: var(--space-2); }
.tk-mb-3 { margin-bottom: var(--space-3); }
.tk-mb-4 { margin-bottom: var(--space-4); }
.tk-mb-5 { margin-bottom: var(--space-5); }
.tk-mb-6 { margin-bottom: var(--space-6); }
.tk-mt-2 { margin-top: var(--space-2); }
.tk-mt-3 { margin-top: var(--space-3); }
.tk-mt-4 { margin-top: var(--space-4); }
.tk-mt-5 { margin-top: var(--space-5); }
.tk-ml-3 { margin-left: var(--space-3); }
.tk-m-0 { margin: 0; }

/* ── Text ── */
.tk-text-muted { color: var(--muted); }
.tk-text-sm { font-size: 0.8125rem; }
.tk-text-xs { font-size: 0.75rem; }
.tk-text-xxs { font-size: 0.6875rem; }
.tk-nowrap { white-space: nowrap; }
.tk-medium { font-weight: 500; }
.tk-center { text-align: center; }
.tk-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Sizing ── */
.tk-w-full { width: 100%; }
.tk-w-input-sm { width: 80px; }
.tk-w-input-md { min-width: 140px; }
.tk-w-input-lg { min-width: 200px; }
.tk-maxw-form { max-width: 480px; }
.tk-maxw-card { max-width: 560px; }

/* ── Stat icon color variants ── */
.stat-icon.is-success { background: var(--success-surface); color: var(--success); }
.stat-icon.is-danger { background: var(--danger-surface); color: var(--danger); }
.stat-icon.is-warning { background: var(--warning-surface); color: var(--warning); }
.stat-icon.is-info { background: var(--navy-50); color: var(--navy-600); }

/* ── Table inside card (flush edges) ── */
.card > .table-wrap.is-flush {
    border: none;
    border-radius: 0;
}

/* ── Filter bar (form row) ── */
.tk-filter-form {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}
.tk-filter-form .form-group { margin-bottom: 0; }

/* ── Definition list (key/value) ── */
.tk-dl dt { font-weight: 600; color: var(--muted); font-size: 0.8125rem; }
.tk-dl dd { margin: 0 0 var(--space-2); font-size: 0.8125rem; }

/* ── Swatch (style guide) ── */
.tk-swatch { height: 48px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.tk-swatch-navy-700 { background: var(--navy-700); }
.tk-swatch-navy-500 { background: var(--navy-500); }
.tk-swatch-accent { background: var(--accent); }
.tk-swatch-success { background: var(--success); }
.tk-swatch-danger { background: var(--danger); }
.tk-swatch-warning { background: var(--warning); }
.tk-swatch-label { padding: var(--space-2) var(--space-3); font-size: 0.75rem; }

/* ── Empty table cell ── */
.tk-empty-cell {
    text-align: center;
    color: var(--muted);
    padding: var(--space-6) !important;
}

/* ── Section divider ── */
.tk-section { margin-bottom: var(--space-7); }
.tk-divider-top {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}