/**
 * Pre-JS employee-app skeleton styles.
 *
 * Loaded via `<link rel="stylesheet">` in `index.html` so the markup injected
 * by `public/employee-app-skeleton.js` paints correctly before the React
 * bundle finishes parsing.
 *
 * Mirror visual changes to:
 *   - ui/src/employee-app/components/EmployeeAppSkeleton/EmployeeAppSkeleton.tsx
 * so the two skeletons stay in sync — otherwise users see a small "snap"
 * when React commits and the inline skeleton is replaced.
 *
 * This file does NOT use Tailwind; Tailwind's CSS arrives later (as part of
 * the Vite bundle) and the whole point of this file is to be available
 * before any bundled CSS does. Keep it dependency-free and small.
 */
.epa-skel {
    position: fixed;
    inset: 0;
    background: #fff;
    color: #1a1a1a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    z-index: 0;
    overflow: hidden;
}

.epa-skel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    height: 56px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.epa-skel__bar {
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    animation: epa-skel-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}

.epa-skel__title {
    width: 180px;
    height: 24px;
}

.epa-skel__bell {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.epa-skel__tabs {
    display: flex;
    padding: 0 16px;
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.epa-skel__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    position: relative;
}

.epa-skel__tab--active {
    color: #1a1a1a;
}

.epa-skel__tab--active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: #0284c7;
}

.epa-skel__tab svg {
    display: block;
}

.epa-skel__status {
    padding: 16px 16px 12px;
}

.epa-skel__status-bar {
    height: 36px;
}

.epa-skel__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
}

.epa-skel__card {
    height: 177px;
}

.epa-skel__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: epa-skel-spin 0.9s linear infinite;
}

@keyframes epa-skel-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes epa-skel-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}