/** * CMS Component: Tables */ .table { margin-bottom: 0; } .table thead th { background-color: #f8fafc; border-bottom: 1px solid var(--border-color); border-top: none; color: var(--text-muted); font-weight: var(--font-weight-semibold); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.75rem 1rem; white-space: nowrap; } .table tbody td { padding: 0.75rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--border-light); font-size: var(--font-size-sm); color: var(--text-main); } .table tbody tr:last-child td { border-bottom: none; } .table-hover tbody tr:hover { background-color: #f8fafc; } /* Badges */ .badge { padding: 0.35em 0.65em; border-radius: var(--border-radius-sm); font-weight: var(--font-weight-medium); font-size: 0.75rem; letter-spacing: 0.01em; } .badge-soft-primary { background-color: var(--primary-soft); color: var(--primary-color); border: 1px solid rgba(10,35,71,0.12); } .badge-soft-accent { background-color: var(--accent-soft); color: #8a6d3b; border: 1px solid rgba(188,159,105,0.2); } .bg-soft-success { background-color: var(--success-soft); color: var(--success-color); border: 1px solid rgba(26,122,74,0.15); } .bg-soft-danger { background-color: var(--danger-soft); color: var(--danger-color); border: 1px solid rgba(192,57,43,0.15); } .bg-soft-warning { background-color: var(--warning-soft); color: var(--warning-color); border: 1px solid rgba(217,119,6,0.15); } .bg-soft-info { background-color: var(--info-soft); color: var(--info-color); border: 1px solid rgba(14,116,144,0.15); } .bg-soft-secondary { background-color: #f1f5f9; color: #64748b; border: 1px solid rgba(100,116,139,0.15); } /* Table action buttons */ .table-actions { display: flex; gap: 0.35rem; align-items: center; } /* Empty state */ .empty-state { text-align: center; padding: 3.5rem 1rem; } .empty-state-icon { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 1rem; } .empty-state h5 { color: var(--text-muted); font-weight: var(--font-weight-semibold); margin-bottom: 0.5rem; } .empty-state p { color: var(--text-muted); font-size: var(--font-size-sm); margin-bottom: 1.25rem; }