/*
 * Foliocontrol Design System v1 — Components
 * Scope: fc-ds only. All public component classes use the fc- prefix.
 * Status: Draft
 */

/* Buttons */
.fc-button,
.fc-icon-button {
    appearance: none;
    border: var(--fc-border-width-1) solid transparent;
    cursor: pointer;
    font-weight: var(--fc-font-weight-semibold);
    text-decoration: none;
    transition:
        background-color var(--fc-duration-normal) var(--fc-easing-standard),
        border-color var(--fc-duration-normal) var(--fc-easing-standard),
        color var(--fc-duration-normal) var(--fc-easing-standard),
        box-shadow var(--fc-duration-normal) var(--fc-easing-standard),
        transform var(--fc-duration-fast) var(--fc-easing-standard);
}

.fc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fc-space-2);
    min-width: max-content;
    border-radius: var(--fc-radius-md);
    line-height: 1;
    white-space: nowrap;
}

.fc-button:hover,
.fc-button.fc-ui-state-hover {
    transform: translateY(-1px);
}

.fc-button:active {
    transform: translateY(0);
}

.fc-button--sm {
    min-height: var(--fc-control-height-sm);
    padding-inline: var(--fc-space-3);
    font-size: var(--fc-font-size-sm);
}

.fc-button--md {
    min-height: var(--fc-control-height-md);
    padding-inline: var(--fc-space-4);
    font-size: var(--fc-font-size-sm);
}

.fc-button--lg {
    min-height: var(--fc-control-height-lg);
    padding-inline: var(--fc-space-5);
    font-size: var(--fc-font-size-md);
}

.fc-button--primary {
    background: var(--fc-color-action-primary);
    color: var(--fc-color-action-primary-text);
}

.fc-button--primary:hover,
.fc-button--primary.fc-ui-state-hover {
    background: var(--fc-color-action-primary-hover);
}

.fc-button--primary:active {
    background: var(--fc-color-action-primary-active);
}

.fc-button--secondary {
    border-color: var(--fc-color-action-secondary-border);
    background: var(--fc-color-action-secondary);
    color: var(--fc-color-action-secondary-text);
    box-shadow: var(--fc-shadow-xs);
}

.fc-button--secondary:hover,
.fc-button--secondary.fc-ui-state-hover {
    border-color: var(--fc-color-border-strong);
    background: var(--fc-color-action-secondary-hover);
}

.fc-button--outline {
    border-color: var(--fc-color-brand);
    background: transparent;
    color: var(--fc-color-brand);
}

.fc-button--outline:hover,
.fc-button--outline.fc-ui-state-hover {
    background: var(--fc-color-brand-subtle);
}

.fc-button--ghost {
    background: transparent;
    color: var(--fc-color-text);
}

.fc-button--ghost:hover,
.fc-button--ghost.fc-ui-state-hover {
    background: var(--fc-color-surface-muted);
}

.fc-button--danger {
    background: var(--fc-color-danger);
    color: var(--fc-color-danger-contrast);
}

.fc-button--danger:hover,
.fc-button--danger.fc-ui-state-hover {
    background: var(--fc-color-danger-hover);
}

.fc-button--link {
    min-height: auto;
    padding: 0;
    border-radius: var(--fc-radius-xs);
    background: transparent;
    color: var(--fc-color-text-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.fc-button--link:hover,
.fc-button--link.fc-ui-state-hover {
    color: var(--fc-color-text-link-hover);
    transform: none;
}

.fc-button--full {
    width: 100%;
}

.fc-button:disabled,
.fc-button[aria-disabled="true"],
.fc-icon-button:disabled,
.fc-icon-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.52;
    pointer-events: none;
    transform: none;
}

.fc-button__label {
    display: inline-flex;
    align-items: center;
    gap: var(--fc-space-2);
}

.fc-button__label > svg {
    width: var(--fc-icon-size-sm);
    height: var(--fc-icon-size-sm);
    flex: 0 0 auto;
}

.fc-button__spinner {
    width: var(--fc-icon-size-sm);
    height: var(--fc-icon-size-sm);
    flex: 0 0 auto;
    border: var(--fc-border-width-2) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--fc-radius-full);
    animation: fc-spin 700ms linear infinite;
}

@keyframes fc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Account deletion dialog */
.fc-account-deletion__summary {
    display: grid;
    gap: var(--fc-space-2);
    margin-bottom: var(--fc-space-6);
}

.fc-account-deletion__summary-title,
.fc-account-deletion__summary-text,
.fc-account-deletion__dialog :where(h2, h3, p) {
    margin: 0;
}

.fc-account-deletion__summary-title {
    color: var(--fc-color-text-strong);
    font-size: var(--fc-font-size-lg);
    font-weight: var(--fc-font-weight-semibold);
}

.fc-account-deletion__summary-text {
    max-width: var(--fc-content-measure);
    color: var(--fc-color-text-muted);
    font-size: var(--fc-font-size-sm);
    line-height: var(--fc-line-height-relaxed);
}

.fc-account-deletion .modal-overlay {
    overflow-y: auto;
    padding: var(--fc-space-6);
}

.fc-account-deletion .modal-container {
    width: min(40rem, 100%);
    max-height: calc(100dvh - var(--fc-space-12));
    border-color: var(--fc-color-border);
    border-radius: var(--fc-radius-lg);
    background: var(--fc-color-surface-raised);
    box-shadow: var(--fc-shadow-lg);
    overflow-y: auto;
}

.fc-account-deletion__dialog {
    color: var(--fc-color-text);
}

.fc-account-deletion__header {
    padding: var(--fc-space-6) var(--fc-space-6) var(--fc-space-4);
    border-bottom: var(--fc-border-width-1) solid var(--fc-color-border-subtle);
}

.fc-account-deletion__title {
    color: var(--fc-color-text-strong);
    font-size: var(--fc-font-size-xl);
    font-weight: var(--fc-font-weight-bold);
    letter-spacing: var(--fc-letter-spacing-tight);
    line-height: var(--fc-line-height-snug);
    white-space: nowrap;
}

.fc-account-deletion__content {
    display: grid;
    gap: var(--fc-space-5);
    padding: var(--fc-space-5) var(--fc-space-6) var(--fc-space-6);
}

.fc-account-deletion__warning {
    display: grid;
    gap: var(--fc-space-3);
    padding: var(--fc-space-4);
    border: var(--fc-border-width-1) solid var(--fc-color-danger-border);
    border-radius: var(--fc-radius-md);
    background: var(--fc-color-danger-subtle);
    color: var(--fc-color-danger-text);
    font-size: var(--fc-font-size-sm);
    line-height: var(--fc-line-height-relaxed);
}

.fc-account-deletion__export {
    display: grid;
    gap: var(--fc-space-1);
    padding: var(--fc-space-4);
    border: var(--fc-border-width-1) solid var(--fc-color-border);
    border-radius: var(--fc-radius-md);
    background: var(--fc-color-surface-subtle);
}

.fc-account-deletion__export h3 {
    color: var(--fc-color-text);
    font-size: var(--fc-font-size-sm);
    font-weight: var(--fc-font-weight-semibold);
}

.fc-account-deletion__export p {
    color: var(--fc-color-text-muted);
    font-size: var(--fc-font-size-sm);
    line-height: var(--fc-line-height-normal);
}

.fc-account-deletion__field {
    display: grid;
    gap: var(--fc-space-2);
}

.fc-account-deletion__instruction {
    margin-bottom: var(--fc-space-2) !important;
    color: var(--fc-color-text);
    font-size: var(--fc-font-size-sm);
    font-weight: var(--fc-font-weight-medium);
    line-height: var(--fc-line-height-relaxed);
}

.fc-account-deletion__field .label {
    margin: 0;
    color: var(--fc-color-text-strong);
    font-size: var(--fc-font-size-sm);
    font-weight: var(--fc-font-weight-semibold);
}

.fc-account-deletion__field .input {
    min-height: var(--fc-control-height-lg);
    border-color: var(--fc-color-border-interactive);
    border-radius: var(--fc-radius-md);
}

.fc-account-deletion__error {
    margin-top: 0;
}

.fc-account-deletion__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--fc-space-3);
    padding: var(--fc-space-4) var(--fc-space-6) var(--fc-space-6);
    border-top: var(--fc-border-width-1) solid var(--fc-color-border-subtle);
}

@media (max-width: 40rem) {
    .fc-account-deletion .modal-overlay {
        align-items: flex-start;
        padding: var(--fc-space-3);
    }

    .fc-account-deletion .modal-container {
        max-height: calc(100dvh - var(--fc-space-6));
        border-radius: var(--fc-radius-md);
    }

    .fc-account-deletion__header {
        padding: var(--fc-space-5) var(--fc-space-4) var(--fc-space-4);
    }

    .fc-account-deletion__title {
        font-size: var(--fc-font-size-lg);
        text-wrap: balance;
        white-space: normal;
    }

    .fc-account-deletion__content {
        gap: var(--fc-space-4);
        padding: var(--fc-space-4);
    }

    .fc-account-deletion__actions {
        padding: var(--fc-space-4);
    }

    .fc-account-deletion__actions .fc-button {
        width: 100%;
        min-width: 0;
        min-height: var(--fc-touch-target-min);
        padding-block: var(--fc-space-2);
        line-height: var(--fc-line-height-snug);
        text-align: center;
        white-space: normal;
    }
}

/* Icon buttons */
.fc-icon-button {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: var(--fc-radius-md);
}

.fc-icon-button--sm {
    width: var(--fc-control-height-sm);
    height: var(--fc-control-height-sm);
}

.fc-icon-button--md {
    width: var(--fc-control-height-md);
    height: var(--fc-control-height-md);
}

.fc-icon-button--lg {
    width: var(--fc-control-height-lg);
    height: var(--fc-control-height-lg);
}

.fc-icon-button--primary {
    background: var(--fc-color-action-primary);
    color: var(--fc-color-action-primary-text);
}

.fc-icon-button--primary:hover {
    background: var(--fc-color-action-primary-hover);
}

.fc-icon-button--secondary {
    border-color: var(--fc-color-action-secondary-border);
    background: var(--fc-color-action-secondary);
    color: var(--fc-color-action-secondary-text);
}

.fc-icon-button--secondary:hover,
.fc-icon-button--outline:hover,
.fc-icon-button--ghost:hover {
    background: var(--fc-color-surface-muted);
}

.fc-icon-button--outline {
    border-color: var(--fc-color-brand);
    background: transparent;
    color: var(--fc-color-brand);
}

.fc-icon-button--ghost {
    background: transparent;
    color: var(--fc-color-text);
}

.fc-icon-button--danger {
    background: var(--fc-color-danger);
    color: var(--fc-color-danger-contrast);
}

.fc-icon-button--danger:hover {
    background: var(--fc-color-danger-hover);
}

.fc-icon-button__icon,
.fc-icon-button__icon > svg {
    width: var(--fc-icon-size-md);
    height: var(--fc-icon-size-md);
}

/* Cards */
.fc-card {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    border-radius: var(--fc-radius-card);
    background: var(--fc-color-surface);
    color: var(--fc-color-text);
}

a.fc-card {
    color: inherit;
    text-decoration: none;
}

.fc-card--md {
    padding: var(--fc-space-7) var(--fc-space-6);
}

.fc-card--sm {
    padding: var(--fc-space-4) var(--fc-space-5);
}

.fc-card--default {
    border: var(--fc-border-width-1) solid var(--fc-color-border);
    box-shadow: var(--fc-shadow-xs);
}

.fc-card--bordered {
    border: var(--fc-border-width-1) solid var(--fc-color-border-strong);
    box-shadow: var(--fc-shadow-none);
}

.fc-card--raised {
    border: var(--fc-border-width-1) solid var(--fc-color-border);
    box-shadow: var(--fc-shadow-sm);
}

.fc-card--interactive {
    border: var(--fc-border-width-1) solid var(--fc-color-blue-200);
    box-shadow: var(--fc-shadow-xs);
    cursor: pointer;
    transition:
        border-color var(--fc-duration-fast) var(--fc-easing-standard),
        box-shadow var(--fc-duration-fast) var(--fc-easing-standard),
        transform var(--fc-duration-fast) var(--fc-easing-standard);
}

.fc-card--interactive:hover {
    border-color: var(--fc-color-border-hover);
    box-shadow: var(--fc-shadow-sm);
    transform: translateY(-1px);
}

.fc-card--interactive:active {
    transform: translateY(0);
}

.fc-card--interactive:focus-visible {
    border-color: var(--fc-color-border-focus);
    outline: var(--fc-border-width-2) solid var(--fc-color-focus);
    outline-offset: var(--fc-focus-ring-offset);
    box-shadow: var(--fc-focus-ring), var(--fc-shadow-sm);
    transform: none;
}

.fc-card__content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--fc-space-2);
}

.fc-card__title {
    margin: 0;
    color: var(--fc-color-text-strong);
    font-size: var(--fc-font-size-lg);
    font-weight: var(--fc-font-weight-bold);
    letter-spacing: var(--fc-letter-spacing-tight);
    line-height: var(--fc-line-height-snug);
    overflow-wrap: anywhere;
}

.fc-card__description {
    margin: 0;
    color: var(--fc-color-text-muted);
    font-size: var(--fc-font-size-sm);
    line-height: var(--fc-line-height-relaxed);
    overflow-wrap: anywhere;
}

.fc-card__action {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--fc-space-1);
    margin-top: auto;
    padding-top: var(--fc-space-4);
    color: var(--fc-color-text-link);
    font-size: var(--fc-font-size-sm);
    font-weight: var(--fc-font-weight-semibold);
}

.fc-card--locked {
    border: var(--fc-border-width-1) solid var(--fc-color-blue-200);
    background: var(--fc-color-surface);
    color: var(--fc-color-text);
    box-shadow: inset 0 3px 0 var(--fc-color-blue-100), var(--fc-shadow-xs);
}

.fc-card__locked-badge {
    display: inline-flex;
    min-height: 1.625rem;
    align-items: center;
    align-self: flex-start;
    margin-top: var(--fc-space-5);
    padding: var(--fc-space-1) var(--fc-space-2);
    border: var(--fc-border-width-1) solid var(--fc-color-blue-200);
    border-radius: var(--fc-radius-full);
    background: var(--fc-color-brand-subtle);
    color: var(--fc-color-brand-strong);
    font-size: var(--fc-font-size-xs);
    font-weight: var(--fc-font-weight-semibold);
    line-height: var(--fc-line-height-snug);
}

.fc-card--sm .fc-card__locked-badge {
    margin-top: var(--fc-space-4);
}

@media (max-width: 40rem) {
    .fc-card--md {
        padding: var(--fc-space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fc-card--interactive:hover {
        transform: none;
    }
}
/* Alerts */
.fc-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--fc-space-3);
    padding: var(--fc-space-4);
    border: var(--fc-border-width-1) solid;
    border-radius: var(--fc-radius-md);
    font-size: var(--fc-font-size-sm);
    line-height: var(--fc-line-height-normal);
}

.fc-alert__icon {
    width: var(--fc-icon-size-md);
    height: var(--fc-icon-size-md);
    flex: 0 0 auto;
    margin-top: 0.05rem;
}

.fc-alert__content {
    min-width: 0;
    flex: 1;
}

.fc-alert__title {
    display: block;
    margin-bottom: var(--fc-space-1);
    color: inherit;
}

.fc-alert__message > :last-child {
    margin-bottom: 0;
}

.fc-alert__dismiss {
    display: grid;
    width: var(--fc-touch-target-min);
    height: var(--fc-touch-target-min);
    margin: calc(-1 * var(--fc-space-3)) calc(-1 * var(--fc-space-3)) calc(-1 * var(--fc-space-3)) 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: var(--fc-radius-sm);
    background: transparent;
    color: currentColor;
    cursor: pointer;
}

.fc-alert__dismiss:hover {
    background: rgba(255, 255, 255, 0.55);
}

.fc-alert__dismiss svg {
    width: var(--fc-icon-size-sm);
    height: var(--fc-icon-size-sm);
}

.fc-alert--neutral {
    border-color: var(--fc-color-border);
    background: var(--fc-color-surface-subtle);
    color: var(--fc-color-text);
}

.fc-alert--info {
    border-color: var(--fc-color-info-border);
    background: var(--fc-color-info-subtle);
    color: var(--fc-color-info-text);
}

.fc-alert--notice {
    border-color: var(--fc-color-warning-border);
    border-radius: var(--fc-radius-lg);
    background: var(--fc-color-warning-subtle);
    color: var(--fc-color-text);
}

.fc-alert--notice .fc-alert__icon {
    color: var(--fc-color-warning);
}

.fc-alert--notice .fc-alert__title {
    color: var(--fc-color-text-strong);
}

.fc-alert--success {
    border-color: var(--fc-color-success-border);
    background: var(--fc-color-success-subtle);
    color: var(--fc-color-success-text);
}

.fc-alert--warning {
    border-color: var(--fc-color-warning-border);
    background: var(--fc-color-warning-subtle);
    color: var(--fc-color-warning-text);
}

.fc-alert--danger {
    border-color: var(--fc-color-danger-border);
    background: var(--fc-color-danger-subtle);
    color: var(--fc-color-danger-text);
}

/* Badges */
.fc-badge {
    display: inline-flex;
    min-height: 1.625rem;
    align-items: center;
    justify-content: center;
    padding: var(--fc-space-1) var(--fc-space-2);
    border: var(--fc-border-width-1) solid transparent;
    border-radius: var(--fc-radius-full);
    font-size: var(--fc-font-size-xs);
    font-weight: var(--fc-font-weight-semibold);
    line-height: var(--fc-line-height-snug);
    vertical-align: middle;
    white-space: nowrap;
}

.fc-badge--neutral.fc-badge--subtle {
    border-color: var(--fc-color-border);
    background: var(--fc-color-surface-muted);
    color: var(--fc-color-text);
}

.fc-badge--primary.fc-badge--subtle {
    border-color: var(--fc-color-blue-200);
    background: var(--fc-color-brand-subtle);
    color: var(--fc-color-brand-strong);
}

.fc-badge--success.fc-badge--subtle {
    border-color: var(--fc-color-success-border);
    background: var(--fc-color-success-subtle);
    color: var(--fc-color-success-text);
}

.fc-badge--warning.fc-badge--subtle {
    border-color: var(--fc-color-warning-border);
    background: var(--fc-color-warning-subtle);
    color: var(--fc-color-warning-text);
}

.fc-badge--danger.fc-badge--subtle {
    border-color: var(--fc-color-danger-border);
    background: var(--fc-color-danger-subtle);
    color: var(--fc-color-danger-text);
}

.fc-badge--info.fc-badge--subtle {
    border-color: var(--fc-color-info-border);
    background: var(--fc-color-info-subtle);
    color: var(--fc-color-info-text);
}

.fc-badge--locked.fc-badge--subtle {
    border-color: var(--fc-color-locked-border);
    background: var(--fc-color-locked-subtle);
    color: var(--fc-color-locked-text);
}

.fc-badge--premium.fc-badge--subtle {
    border-color: var(--fc-color-premium-border);
    background: var(--fc-color-premium-subtle);
    color: var(--fc-color-premium-text);
}

.fc-badge--neutral.fc-badge--strong,
.fc-badge--locked.fc-badge--strong {
    background: var(--fc-color-neutral-700);
    color: var(--fc-color-text-inverse);
}

.fc-badge--locked.fc-badge--strong {
    background: var(--fc-color-locked-strong);
}

.fc-badge--primary.fc-badge--strong {
    background: var(--fc-color-brand);
    color: var(--fc-color-brand-contrast);
}

.fc-badge--success.fc-badge--strong {
    background: var(--fc-color-success);
    color: var(--fc-color-success-contrast);
}

.fc-badge--warning.fc-badge--strong {
    background: var(--fc-color-warning);
    color: var(--fc-color-warning-contrast);
}

.fc-badge--danger.fc-badge--strong {
    background: var(--fc-color-danger);
    color: var(--fc-color-danger-contrast);
}

.fc-badge--info.fc-badge--strong {
    background: var(--fc-color-info);
    color: var(--fc-color-info-contrast);
}

.fc-badge--premium.fc-badge--strong {
    background: var(--fc-color-premium-strong);
    color: var(--fc-color-text-inverse);
}

/* Forms */
.fc-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--fc-space-2);
}

.fc-field__label {
    color: var(--fc-color-text);
    font-size: var(--fc-font-size-sm);
    font-weight: var(--fc-font-weight-semibold);
    line-height: var(--fc-line-height-snug);
}

.fc-field__required {
    color: var(--fc-color-danger);
}

.fc-field__help,
.fc-field__error {
    margin: 0;
    font-size: var(--fc-font-size-xs);
    line-height: var(--fc-line-height-normal);
}

.fc-field__help {
    color: var(--fc-color-text-muted);
}

.fc-field__error {
    color: var(--fc-color-danger-text);
    font-weight: var(--fc-font-weight-medium);
}

.fc-input,
.fc-select,
.fc-textarea {
    width: 100%;
    border: var(--fc-border-width-1) solid var(--fc-color-border-interactive);
    border-radius: var(--fc-radius-md);
    background: var(--fc-color-surface);
    color: var(--fc-color-text);
    transition:
        border-color var(--fc-duration-normal) var(--fc-easing-standard),
        box-shadow var(--fc-duration-normal) var(--fc-easing-standard),
        background-color var(--fc-duration-normal) var(--fc-easing-standard);
}

.fc-input,
.fc-select {
    min-height: var(--fc-control-height-md);
    padding-inline: var(--fc-space-3);
}

.fc-textarea {
    min-height: 7rem;
    padding: var(--fc-space-3);
    resize: vertical;
}

.fc-input::placeholder,
.fc-textarea::placeholder {
    color: var(--fc-color-text-muted);
}

.fc-input:hover,
.fc-select:hover,
.fc-textarea:hover {
    border-color: var(--fc-color-border-strong);
}

.fc-input:focus,
.fc-select:focus,
.fc-textarea:focus {
    border-color: var(--fc-color-border-focus);
    outline: none;
    box-shadow: var(--fc-focus-ring);
}

.fc-input[aria-invalid="true"],
.fc-select[aria-invalid="true"],
.fc-textarea[aria-invalid="true"] {
    border-color: var(--fc-color-danger);
    background: var(--fc-color-danger-subtle);
}

.fc-input:disabled,
.fc-select:disabled,
.fc-textarea:disabled {
    cursor: not-allowed;
    border-color: var(--fc-color-border);
    background: var(--fc-color-surface-disabled);
    color: var(--fc-color-text-disabled);
}

.fc-input[readonly],
.fc-textarea[readonly] {
    background: var(--fc-color-surface-subtle);
    color: var(--fc-color-text-muted);
}

.fc-input-group {
    display: flex;
    min-width: 0;
}

.fc-input-group .fc-input {
    min-width: 0;
    border-radius: var(--fc-radius-md) 0 0 var(--fc-radius-md);
}

.fc-input-group__addon {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--fc-space-3);
    border: var(--fc-border-width-1) solid var(--fc-color-border-interactive);
    border-left: 0;
    border-radius: 0 var(--fc-radius-md) var(--fc-radius-md) 0;
    background: var(--fc-color-surface-muted);
    color: var(--fc-color-text-muted);
    font-size: var(--fc-font-size-sm);
    font-weight: var(--fc-font-weight-semibold);
}

.fc-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--fc-space-2);
    color: var(--fc-color-text);
    font-size: var(--fc-font-size-sm);
    cursor: pointer;
}

.fc-choice input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1rem 0 0;
    accent-color: var(--fc-color-brand);
}

.fc-choice input:disabled {
    cursor: not-allowed;
}

.fc-choice:has(input:disabled) {
    color: var(--fc-color-text-disabled);
    cursor: not-allowed;
}

/* Tables */
.fc-table-container {
    overflow: hidden;
    border: var(--fc-border-width-1) solid var(--fc-color-border);
    border-radius: var(--fc-radius-lg);
    background: var(--fc-color-surface);
}

.fc-table-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.fc-table {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-size: var(--fc-font-size-sm);
}

.fc-table th,
.fc-table td {
    padding: var(--fc-space-3) var(--fc-space-4);
    border-bottom: var(--fc-border-width-1) solid var(--fc-color-border-subtle);
    text-align: left;
    vertical-align: middle;
}

.fc-table th {
    background: var(--fc-color-surface-subtle);
    color: var(--fc-color-text-muted);
    font-size: var(--fc-font-size-xs);
    font-weight: var(--fc-font-weight-bold);
    letter-spacing: var(--fc-letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
}

.fc-table tbody tr {
    transition: background-color var(--fc-duration-normal) var(--fc-easing-standard);
}

.fc-table tbody tr:hover {
    background: var(--fc-color-surface-subtle);
}

.fc-table tbody tr:last-child td {
    border-bottom: 0;
}

.fc-table__number {
    text-align: right !important;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.fc-table__actions {
    width: 1%;
    text-align: right !important;
    white-space: nowrap;
}

.fc-table__empty {
    padding: var(--fc-space-10) !important;
    color: var(--fc-color-text-muted);
    text-align: center !important;
}

/* General states */
.fc-state {
    display: flex;
    min-height: 9rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fc-space-3);
    padding: var(--fc-space-6);
    border: var(--fc-border-width-1) dashed var(--fc-color-border-strong);
    border-radius: var(--fc-radius-lg);
    background: var(--fc-color-surface-subtle);
    color: var(--fc-color-text-muted);
    text-align: center;
}

.fc-state__icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: var(--fc-radius-full);
    background: var(--fc-color-surface);
    color: var(--fc-color-brand);
    box-shadow: var(--fc-shadow-xs);
}

.fc-state__icon svg {
    width: var(--fc-icon-size-lg);
    height: var(--fc-icon-size-lg);
}

.fc-state__title {
    margin: 0;
    color: var(--fc-color-text-strong);
    font-size: var(--fc-font-size-md);
    font-weight: var(--fc-font-weight-semibold);
}

.fc-state__message {
    max-width: 28rem;
    margin: 0;
    font-size: var(--fc-font-size-sm);
}

.fc-state--unavailable .fc-state__icon,
.fc-state--disabled .fc-state__icon {
    color: var(--fc-color-text-muted);
}

.fc-state--locked {
    border-color: var(--fc-color-locked-border);
    background: var(--fc-color-locked-subtle);
}

.fc-state--premium {
    border-color: var(--fc-color-premium-border);
    background: var(--fc-color-premium-subtle);
}

.fc-status-line {
    display: inline-flex;
    align-items: center;
    gap: var(--fc-space-2);
    font-size: var(--fc-font-size-sm);
    font-weight: var(--fc-font-weight-medium);
}

.fc-status-line__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--fc-radius-full);
    background: currentColor;
}

.fc-status-line--loading {
    color: var(--fc-color-brand);
}

.fc-status-line--disabled {
    color: var(--fc-color-text-disabled);
}

.fc-status-line--unavailable {
    color: var(--fc-color-text-muted);
}

@media (max-width: 40rem) {
    .fc-button--full-mobile {
        width: 100%;
    }
}