.sf-title {
font: var(--sf-font-title);
margin: 0 0 var(--sf-space-4);
}
.sf-section-title {
font: var(--sf-font-section);
margin: 0 0 var(--sf-space-4);
}
.sf-card-title {
font: var(--sf-font-card);
margin: 0 0 var(--sf-space-3);
}
.sf-body {
font: var(--sf-font-body);
margin: 0 0 var(--sf-space-3);
}
.sf-metadata {
font: var(--sf-font-metadata);
color: var(--sf-text-muted);
}
.sf-caption {
font: var(--sf-font-caption);
color: var(--sf-text-muted);
}
.sf-text-secondary {
color: var(--sf-text-secondary);
}
.sf-text-muted {
color: var(--sf-text-muted);
} .sf-card {
background: var(--sf-surface);
border: 1px solid var(--sf-border);
border-radius: var(--sf-radius-lg);
padding: var(--sf-space-5);
box-shadow: var(--sf-shadow-raised);
}
.sf-card + .sf-card {
margin-top: var(--sf-space-5);
}
.sf-section {
margin-bottom: var(--sf-space-6);
}
.sf-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sf-space-3);
margin-bottom: var(--sf-space-4);
}
.sf-list-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sf-space-3);
margin-bottom: var(--sf-space-4);
} .sf-status {
display: inline-flex;
align-items: center;
gap: var(--sf-space-2);
padding: var(--sf-space-1) var(--sf-space-3);
border-radius: 9999px;
font: var(--sf-font-label);
background: var(--sf-surface-raised);
color: var(--sf-text-secondary);
border: 1px solid var(--sf-border);
}
.sf-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.sf-status--live {
background: rgba(239, 68, 68, 0.12);
color: var(--sf-live);
border-color: rgba(239, 68, 68, 0.35);
}
.sf-status--live::before {
animation: sf-pulse 1.5s ease-in-out infinite;
}
@keyframes sf-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.sf-status--ready,
.sf-status--active,
.sf-status--connected {
background: rgba(34, 197, 94, 0.12);
color: var(--sf-success);
border-color: rgba(34, 197, 94, 0.35);
}
.sf-status--offline,
.sf-status--disabled,
.sf-status--canceled {
background: var(--sf-surface-raised);
color: var(--sf-offline);
border-color: var(--sf-border);
}
.sf-status--warning,
.sf-status--connecting,
.sf-status--past_due {
background: rgba(255, 191, 71, 0.12);
color: var(--sf-warning);
border-color: rgba(255, 191, 71, 0.35);
}
.sf-status--danger,
.sf-status--error,
.sf-status--rejected,
.sf-status--suspended {
background: rgba(239, 68, 68, 0.12);
color: var(--sf-danger);
border-color: rgba(239, 68, 68, 0.35);
}
.sf-status--scheduled,
.sf-status--pending {
background: rgba(184, 190, 202, 0.12);
color: var(--sf-text-secondary);
border-color: var(--sf-border);
} .sf-metric {
display: flex;
flex-direction: column;
gap: var(--sf-space-1);
}
.sf-metric__value {
font: var(--sf-font-display);
font-size: 1.75rem;
color: var(--sf-text);
}
.sf-metric__label {
font: var(--sf-font-label);
color: var(--sf-text-muted);
} .sf-button,
button.sf-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sf-space-2);
padding: var(--sf-space-3) var(--sf-space-4);
border-radius: var(--sf-radius);
font: var(--sf-font-body);
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--sf-transition), border-color var(--sf-transition), color var(--sf-transition), box-shadow var(--sf-transition);
}
.sf-button:disabled,
.sf-button[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
}
.sf-button--primary {
background: var(--sf-accent);
color: var(--sf-text);
border-color: var(--sf-accent);
}
.sf-button--primary:hover:not(:disabled) {
background: var(--sf-accent-bright);
border-color: var(--sf-accent-bright);
}
.sf-button--secondary {
background: var(--sf-surface-raised);
color: var(--sf-text);
border-color: var(--sf-border-strong);
}
.sf-button--secondary:hover:not(:disabled) {
background: var(--sf-surface-overlay);
border-color: var(--sf-border);
}
.sf-button--tertiary {
background: transparent;
color: var(--sf-text-secondary);
border-color: transparent;
}
.sf-button--tertiary:hover:not(:disabled) {
color: var(--sf-text);
background: var(--sf-surface-raised);
}
.sf-button--danger {
background: var(--sf-danger);
color: var(--sf-text);
border-color: var(--sf-danger);
}
.sf-button--danger:hover:not(:disabled) {
background: #dc2626;
border-color: #dc2626;
}
.sf-button--small {
padding: var(--sf-space-2) var(--sf-space-3);
font: var(--sf-font-metadata);
}
.sf-button--large {
padding: var(--sf-space-3) var(--sf-space-5);
font: var(--sf-font-section);
}
.sf-button-group {
display: flex;
flex-wrap: wrap;
gap: var(--sf-space-3);
} .sf-form-group {
margin-bottom: var(--sf-space-4);
}
.sf-label,
label.sf-label {
display: block;
font: var(--sf-font-label);
color: var(--sf-text-secondary);
margin-bottom: var(--sf-space-2);
}
.sf-hint {
font: var(--sf-font-caption);
color: var(--sf-text-muted);
margin-top: var(--sf-space-1);
}
.sf-input,
input.sf-input,
select.sf-input,
textarea.sf-input {
width: 100%;
padding: var(--sf-space-3);
background: var(--sf-surface-raised);
border: 1px solid var(--sf-border-strong);
border-radius: var(--sf-radius);
color: var(--sf-text);
font: var(--sf-font-body);
transition: border-color var(--sf-transition), box-shadow var(--sf-transition);
}
.sf-input:focus,
input.sf-input:focus,
select.sf-input:focus,
textarea.sf-input:focus {
outline: none;
border-color: var(--sf-accent);
box-shadow: 0 0 0 3px var(--sf-border-focus);
}
.sf-input::placeholder {
color: var(--sf-text-muted);
}
select.sf-input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b8beca' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
} .sf-table {
width: 100%;
border-collapse: collapse;
font: var(--sf-font-body);
}
.sf-table thead {
border-bottom: 1px solid var(--sf-border-strong);
}
.sf-table th,
.sf-table td {
padding: var(--sf-space-3) var(--sf-space-2);
text-align: left;
vertical-align: top;
}
.sf-table th {
font: var(--sf-font-label);
color: var(--sf-text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.sf-table tbody tr {
border-bottom: 1px solid var(--sf-border);
}
.sf-table tbody tr:hover {
background: var(--sf-surface-raised);
} .sf-empty-state {
text-align: center;
padding: var(--sf-space-7) var(--sf-space-5);
max-width: 520px;
margin: 0 auto;
}
.sf-empty-state__title {
font: var(--sf-font-section);
color: var(--sf-text);
margin-bottom: var(--sf-space-2);
}
.sf-empty-state__body {
font: var(--sf-font-body);
color: var(--sf-text-secondary);
margin-bottom: var(--sf-space-4);
} .sf-alert {
padding: var(--sf-space-4);
border-radius: var(--sf-radius);
border: 1px solid var(--sf-border);
background: var(--sf-surface-raised);
color: var(--sf-text);
margin-bottom: var(--sf-space-4);
}
.sf-alert p:first-child {
margin-top: 0;
}
.sf-alert p:last-child {
margin-bottom: 0;
}
.sf-alert--success {
background: rgba(34, 197, 94, 0.10);
border-color: rgba(34, 197, 94, 0.35);
color: var(--sf-success);
}
.sf-alert--warning {
background: rgba(255, 191, 71, 0.10);
border-color: rgba(255, 191, 71, 0.35);
color: var(--sf-warning);
}
.sf-alert--error {
background: rgba(239, 68, 68, 0.10);
border-color: rgba(239, 68, 68, 0.35);
color: var(--sf-danger);
}
.sf-alert--info {
background: rgba(184, 190, 202, 0.10);
border-color: var(--sf-border-strong);
color: var(--sf-text-secondary);
} .sf-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sf-stack > * + * {
margin-top: var(--sf-space-4);
}
.sf-grid {
display: grid;
gap: var(--sf-space-4);
}
.sf-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sf-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sf-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1023px) {
.sf-grid--2,
.sf-grid--3,
.sf-grid--4 {
grid-template-columns: 1fr;
}
}