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: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;
}

.datepicker-icon-btn {
    color: var(--text-muted);
    @apply absolute inset-y-0 right-2 my-auto inline-flex h-6 w-6 items-center justify-center rounded-md border border-transparent bg-transparent p-0 transition;
}

.datepicker-icon-btn:hover {
    color: var(--text-primary);
    background-color: var(--ghost-hover);
}

.datepicker-icon-btn:focus-visible {
    outline: none;
    border-color: rgb(var(--accent-400));
    box-shadow: 0 0 0 2px rgb(var(--accent-400) / 0.3);
}

.datepicker-icon-btn:disabled {
    color: var(--ghost-disabled-text);
    background-color: transparent;
    @apply cursor-not-allowed;
}

.datepicker-popup {
    border: 1px solid var(--surface-divider);
    background-color: var(--surface-bg-strong);
    box-shadow: var(--shadow-glow);
    color: var(--text-primary);
    backdrop-filter: saturate(145%) blur(var(--auth-glass-blur));
    -webkit-backdrop-filter: saturate(145%) blur(var(--auth-glass-blur));
    will-change: backdrop-filter;
    max-width: min(96vw, 440px);
    @apply fixed z-[70] flex flex-col gap-3 rounded-xl p-3;
}

.datepicker-popup-top {
    transform-origin: bottom center;
}

.datepicker-popup-bottom {
    transform-origin: top center;
}

@screen sm {
    .datepicker-popup {
        @apply flex-row;
    }
}

.datepicker-panel {
    @apply min-w-0;
}

.datepicker-calendar-nav {
    @apply mb-2 flex items-center justify-between gap-2;
}

.datepicker-nav-btn {
    border: 1px solid var(--ghost-border);
    background-color: var(--ghost-bg);
    color: var(--text-secondary);
    @apply inline-flex h-8 w-8 items-center justify-center rounded-lg transition;
}

.datepicker-nav-btn:hover {
    background-color: var(--ghost-hover);
    color: var(--text-primary);
}

.datepicker-heading-controls {
    @apply relative flex items-center gap-2;
}

.datepicker-chooser {
    @apply relative;
}

.datepicker-chooser-btn {
    border: 1px solid var(--field-border);
    background-color: var(--field-bg);
    color: var(--text-primary);
    @apply inline-flex h-8 items-center rounded-lg px-2.5 text-xs font-semibold;
}

.datepicker-chooser-menu {
    border: 1px solid var(--surface-divider);
    background-color: var(--datepicker-menu-bg);
    box-shadow: var(--shadow-glow);
    @apply absolute left-0 top-full z-20 mt-1 max-h-48 min-w-[9rem] overflow-y-auto rounded-lg p-1;
}

.datepicker-chooser-option {
    color: var(--text-secondary);
    @apply block w-full rounded-md px-2 py-1.5 text-left text-xs font-medium transition;
}

.datepicker-chooser-option:hover {
    background-color: var(--ghost-hover);
    color: var(--text-primary);
}

.datepicker-chooser-option.is-selected {
    background-color: rgb(var(--accent-500) / 0.22);
    color: rgb(var(--accent-300));
}

.datepicker-weekdays {
    @apply mb-1 grid grid-cols-7 gap-1;
}

.datepicker-weekday {
    color: var(--text-muted);
    @apply text-center text-[0.65rem] font-semibold uppercase tracking-[0.08em];
}

.datepicker-grid {
    @apply grid grid-cols-7 gap-1;
}

.datepicker-day {
    color: var(--text-secondary);
    @apply inline-flex h-8 w-8 items-center justify-center rounded-lg text-sm transition;
}

.datepicker-day:hover {
    background-color: var(--ghost-hover);
    color: var(--text-primary);
}

.datepicker-day.is-selected {
    background-color: rgb(var(--accent-500));
    color: rgb(var(--accent-contrast));
}

.datepicker-day.is-today {
    border: 1px solid rgb(var(--accent-400) / 0.65);
}

.datepicker-day.is-outside-month {
    color: var(--text-soft);
}

.datepicker-day:disabled {
    color: var(--ghost-disabled-text);
    background-color: transparent;
    @apply cursor-not-allowed opacity-50;
}

.datepicker-time-root {
    @apply grid min-w-[180px] grid-cols-2 gap-2;
}

.datepicker-time-column {
    @apply flex min-w-0 flex-col gap-1;
}

.datepicker-time-title {
    color: var(--text-muted);
    @apply text-[0.65rem] font-semibold uppercase tracking-[0.08em];
}

.datepicker-time-list {
    border: 1px solid var(--field-border);
    background-color: var(--field-bg);
    @apply max-h-52 overflow-y-auto rounded-lg p-1;
}

.datepicker-time-option {
    color: var(--text-secondary);
    @apply block w-full rounded-md px-2 py-1.5 text-left text-xs font-semibold transition;
}

.datepicker-time-option:hover {
    background-color: var(--ghost-hover);
    color: var(--text-primary);
}

.datepicker-time-option.is-selected {
    background-color: rgb(var(--accent-500) / 0.22);
    color: rgb(var(--accent-300));
}

.datepicker-time-option:disabled {
    color: var(--ghost-disabled-text);
    background-color: transparent;
    @apply cursor-not-allowed opacity-55;
}