web-ui/src/styles/components.css

.surface {
    border: 1px solid var(--surface-border);
    background-color: var(--surface-bg);
    box-shadow: var(--shadow-glow);
    @apply rounded-2xl backdrop-blur-xl;
}

.field {
    border: 1px solid var(--field-border);
    background-color: var(--field-bg);
    color: var(--text-primary);
    appearance: none;
    -webkit-appearance: none;
    -webkit-text-fill-color: var(--text-primary);
    @apply w-full rounded-xl px-3 py-2 text-sm outline-none transition;
}

.field:focus {
    border-color: rgb(var(--accent-400));
    box-shadow: 0 0 0 2px rgb(var(--accent-400) / 0.3);
}

.field::placeholder {
    color: var(--text-soft);
}

.field::selection {
    background-color: var(--field-selection-bg);
    color: var(--field-selection-text);
    -webkit-text-fill-color: var(--field-selection-text);
}

.field[type='date']::-webkit-datetime-edit-day-field:focus,
.field[type='date']::-webkit-datetime-edit-month-field:focus,
.field[type='date']::-webkit-datetime-edit-year-field:focus,
.field[type='time']::-webkit-datetime-edit-hour-field:focus,
.field[type='time']::-webkit-datetime-edit-minute-field:focus,
.field[type='time']::-webkit-datetime-edit-ampm-field:focus,
.field[type='datetime-local']::-webkit-datetime-edit-day-field:focus,
.field[type='datetime-local']::-webkit-datetime-edit-month-field:focus,
.field[type='datetime-local']::-webkit-datetime-edit-year-field:focus,
.field[type='datetime-local']::-webkit-datetime-edit-hour-field:focus,
.field[type='datetime-local']::-webkit-datetime-edit-minute-field:focus,
.field[type='datetime-local']::-webkit-datetime-edit-ampm-field:focus {
    border-radius: 0.375rem;
    background-color: var(--field-selection-bg);
    color: var(--field-selection-text);
    -webkit-text-fill-color: var(--field-selection-text);
}

.field:disabled {
    border-color: var(--field-disabled-border);
    background-color: var(--field-disabled-bg);
    color: var(--field-disabled-text);
    -webkit-text-fill-color: var(--field-disabled-text);
}

.field:disabled::placeholder {
    color: var(--field-disabled-placeholder);
}

.btn-solid:disabled,
.btn-outlined:disabled,
.btn-noborder:disabled {
    opacity: 1;
}

.btn-solid,
.btn-outlined,
.btn-noborder {
    @apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition;
}

.btn-solid {
    border: 1px solid transparent;
}

.btn-outlined {
    border: 1px solid var(--ghost-border);
}

.btn-noborder {
    border: 1px solid transparent;
}

.btn-solid.btn-primary {
    background-color: rgb(var(--accent-500));
    color: rgb(var(--accent-contrast));
    @apply disabled:opacity-100;
}

.btn-solid.btn-primary:hover {
    background-color: rgb(var(--accent-400));
}

.btn-solid.btn-primary:disabled {
    background-color: var(--primary-disabled-bg);
    color: var(--primary-disabled-text);
}

.btn-solid.btn-secondary {
    border-color: var(--ghost-border);
    background-color: var(--ghost-border);
    color: var(--text-primary);
}

.btn-solid.btn-secondary:hover {
    background-color: var(--ghost-hover);
}

.btn-solid.btn-secondary:disabled {
    border-color: var(--ghost-disabled-border);
    background-color: var(--ghost-disabled-bg);
    color: var(--ghost-disabled-text);
}

.btn-solid.btn-important {
    border-color: #dc2626;
    @apply bg-red-600 text-white hover:bg-red-500 disabled:opacity-100;
}

.btn-solid.btn-important:disabled {
    border-color: #7f1d1d;
    background-color: #7f1d1d;
    color: #fecaca;
}

.btn-outlined.btn-secondary {
    border-color: var(--ghost-border);
    background-color: var(--ghost-bg);
    color: var(--text-secondary);
}

.btn-outlined.btn-secondary:hover {
    background-color: var(--ghost-hover);
}

.btn-outlined.btn-secondary:disabled {
    border-color: var(--ghost-disabled-border);
    background-color: var(--ghost-disabled-bg);
    color: var(--ghost-disabled-text);
}

.btn-outlined.btn-primary {
    border-color: rgb(var(--accent-500));
    color: rgb(var(--accent-300));
    background-color: transparent;
}

.btn-outlined.btn-primary:hover {
    background-color: rgb(var(--accent-500) / 0.15);
    color: rgb(var(--accent-300));
}

.btn-outlined.btn-primary:disabled {
    border-color: rgb(var(--accent-500) / 0.4);
    color: rgb(var(--accent-300) / 0.6);
    background-color: transparent;
}

.btn-outlined.btn-important {
    @apply border-red-500 text-red-400;
    background-color: transparent;
}

.btn-outlined.btn-important:hover {
    @apply bg-red-500/10 text-red-300;
}

.btn-outlined.btn-important:disabled {
    @apply border-red-900 text-red-900;
    background-color: transparent;
}

.btn-noborder.btn-secondary {
    background-color: transparent;
    color: var(--text-secondary);
}

.btn-noborder.btn-secondary:hover {
    background-color: var(--ghost-hover);
}

.btn-noborder.btn-secondary:disabled {
    background-color: transparent;
    color: var(--ghost-disabled-text);
}

.btn-noborder.btn-primary {
    color: rgb(var(--accent-300));
    background-color: transparent;
}

.btn-noborder.btn-primary:hover {
    background-color: rgb(var(--accent-500) / 0.15);
    color: rgb(var(--accent-300));
}

.btn-noborder.btn-primary:disabled {
    color: rgb(var(--accent-300) / 0.6);
    background-color: transparent;
}

.btn-noborder.btn-important {
    @apply text-red-400;
    background-color: transparent;
}

.btn-noborder.btn-important:hover {
    @apply bg-red-500/10 text-red-300;
}

.btn-noborder.btn-important:disabled {
    @apply text-red-900;
    background-color: transparent;
}

.ui-kicker {
    color: var(--text-muted);
}

.ui-title {
    color: var(--text-primary);
}

.ui-body-secondary {
    color: var(--text-muted);
}

.ui-code {
    border: 1px solid var(--surface-divider);
    background-color: var(--ghost-bg);
    color: var(--text-primary);
    @apply rounded-md px-1.5 py-0.5;
}

.ui-body-primary {
    color: var(--text-secondary);
}

.ui-loading {
    color: var(--text-muted);
}

.ui-empty {
    color: var(--text-soft);
}

.ui-link {
    color: var(--text-secondary);
    @apply font-semibold transition;
}

.ui-link:hover {
    color: var(--text-primary);
}

.ui-label {
    color: var(--text-secondary);
}

.ui-label-disabled {
    color: var(--text-soft);
}

.ui-error {
    color: var(--error-text);
}

.ui-accent-active {
    background-color: rgb(var(--accent-500));
    color: rgb(var(--accent-contrast));
}

.ui-accent-active:hover {
    background-color: rgb(var(--accent-400));
}

.chip-root {
    @apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none;
}

.chip-solid {
    border-color: var(--ghost-border);
    background-color: var(--ghost-border);
    color: var(--text-primary);
}

.chip-outlined {
    background-color: transparent;
    border-color: var(--ghost-border);
    color: var(--text-secondary);
}

.alert-error {
    border: 1px solid var(--error-border);
    background-color: var(--error-bg);
    color: var(--error-text);
    @apply rounded-lg px-3 py-2 text-sm;
}

.table-shell {
    border: 1px solid var(--surface-divider);
    background-color: var(--surface-bg-strong);
    @apply overflow-hidden rounded-xl;
}

.table-scroll {
    @apply overflow-x-auto;
}

.table-root {
    @apply min-w-full;
}

.table-head {
    background-color: var(--table-head-bg);
    border-bottom: 1px solid var(--surface-divider);
}

.table-head-cell {
    color: var(--text-primary);
    @apply px-4 py-3 text-left text-sm font-semibold tracking-wider;
}

.table-sort-button {
    @apply inline-flex items-center gap-1.5 text-left;
}

.table-sort-icon {
    color: var(--text-muted);
    @apply inline-flex items-center;
}

.table-body-row {
    border-top: 1px solid var(--table-row-divider);
}

.table-cell-primary {
    color: var(--text-primary);
    @apply px-4 py-3 text-sm;
}

.table-cell-secondary {
    color: var(--text-secondary);
    @apply px-4 py-3 text-sm;
}