/* Focus rings, skeletons, empty states, destructive UI patterns */

:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ed-focus-ring);
    border-radius: var(--ed-radius-sm);
}

:focus-visible.btn,
:focus-visible.form-control,
:focus-visible.form-select {
    box-shadow: var(--ed-focus-ring);
}

a:focus-visible {
    border-radius: var(--ed-radius-sm);
}

.dropdown-toggle:focus-visible {
    box-shadow: var(--ed-focus-ring);
}

/* Skeleton */
@keyframes ed-skeleton-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        rgba(var(--ed-primary-rgb), 0.06) 0%,
        rgba(var(--ed-primary-rgb), 0.12) 50%,
        rgba(var(--ed-primary-rgb), 0.06) 100%
    );
    background-size: 200% 100%;
    animation: ed-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: var(--ed-radius-sm);
}

@keyframes ed-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

html.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
}

.skeleton-line {
    height: 12px;
    margin-bottom: 8px;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 65%; }
.skeleton-title { height: 22px; width: 55%; margin-bottom: 12px; }
.skeleton-card {
    height: 88px;
    border-radius: var(--ed-radius-md);
}

.skeleton-table-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ed-border);
}

.skeleton-table-row .skeleton-line {
    flex: 1;
    margin-bottom: 0;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--ed-space-6) var(--ed-space-4);
    border: 1px dashed var(--ed-border-strong);
    border-radius: var(--ed-radius-lg);
    background: var(--ed-surface);
}

html.dark-mode .empty-state {
    background: rgba(0, 0, 0, 0.15);
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--ed-space-4);
    border-radius: 50%;
    background: var(--ed-primary-soft);
    color: var(--ed-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.empty-state h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: var(--ed-space-2);
}

.empty-state p {
    color: var(--ed-text-muted);
    font-size: 0.9rem;
    max-width: 36ch;
    margin-left: auto;
    margin-right: auto;
}

/* Destructive action emphasis */
.btn-danger,
a.btn-danger {
    font-weight: 600;
}

[data-confirm] {
    cursor: pointer;
}

.is-destructive-pending {
    pointer-events: none;
    opacity: 0.65;
}
