/* Shared by server placeholders and React. Deliberately independent of JS,
   Tailwind's runtime stylesheet and the deferred MUI bundle. */
.kp-loading { width: 100%; min-width: 0; }
.kp-loading, .kp-loading * { box-sizing: border-box; }
/* Match the small MUI table before its runtime is loaded. Shared cell geometry
   also keeps column wrapping identical at the server/React boundary. */
.kp-attendance-table { border-collapse: collapse; border-spacing: 0; width: 100%; }
.kp-attendance-table th, .kp-attendance-table td { box-sizing: border-box; padding: 6px 16px; border-bottom: 1px solid #e0e0e0; text-align: left; font: 400 .875rem/1.43 Inter, sans-serif; }
.kp-attendance-table th { font-weight: 500; }
.kp-attendance-table th:first-child { width: 4rem; }
.kp-attendance-table th:last-child { width: 120px; }
.kp-attendance-table th:last-child, .kp-attendance-table td:last-child { text-align: right; }
.kp-attendance-placeholder__year { box-sizing: border-box; position: relative; display: flex; align-items: center; justify-content: space-between; width: 6rem; min-width: 6rem; height: calc(1.4375 * .875rem + .75rem); padding: 0 .5rem 0 1rem; border: 1px solid #e5e7eb; border-radius: 4px; font-size: .875rem; }
.kp-attendance-placeholder__year-label { position: absolute; top: -.5rem; left: .75rem; background: white; padding: 0 .25rem; font-size: .65625rem; line-height: 1rem; color: #64748b; }
.kp-attendance-placeholder__rank, .kp-attendance-placeholder__name, .kp-attendance-placeholder__count, .kp-attendance-placeholder__avatar { display: block; background: #e2e8f0; border-radius: 4px; animation: kp-loading-pulse 1.8s ease-in-out infinite; }
.kp-attendance-placeholder__rank, .kp-attendance-placeholder__name, .kp-attendance-placeholder__count { height: 1.2em; transform: scaleY(.6); }
.kp-attendance-placeholder__rank { width: 24px; }
.kp-attendance-placeholder__name { width: 140px; }
.kp-attendance-placeholder__count { width: 32px; }
.kp-attendance-placeholder__avatar { width: 24px; height: 24px; border-radius: 50%; }
.kp-timeline-placeholder { display: flex; flex-direction: column; gap: 16px; }
.kp-documents-placeholder { display: flex; flex-direction: column; gap: 1rem; }
.kp-documents-placeholder__upload { display: flex; flex-direction: column; gap: .75rem; }
.kp-documents-placeholder__controls { display: flex; flex-direction: column; gap: 16px; }
.kp-documents-placeholder__field { display: block; box-sizing: border-box; height: 2rem; border: 1px solid #e2e8f0; border-radius: 4px; background: #f8fafc; }
.kp-documents-placeholder__buttons { display: block; width: 180px; height: 2rem; border-radius: 4px; background: #e2e8f0; }
.kp-documents-placeholder__dropzone { box-sizing: border-box; padding: 16px; border: 1px dashed #e2e8f0; border-radius: 4px; background: #f8fafc; text-align: center; }
.kp-documents-placeholder__dropzone::before { content: ''; display: block; width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 4px; background: #e2e8f0; }
.kp-documents-placeholder__dropzone span { visibility: hidden; display: block; font: 400 .875rem/1.5 Inter, sans-serif; }
.kp-documents-placeholder__status { height: 1.25rem; }
.kp-entity-documents-placeholder { display: flex; flex-direction: column; gap: 1rem; }
.kp-entity-documents-placeholder__status { display: flex; flex-direction: column; gap: 8px; font: 400 .875rem/1.43 Inter, sans-serif; visibility: hidden; }
.kp-entity-documents-placeholder__spinner { display: block; width: 16px; height: 16px; }
@media (min-width: 600px) {
    .kp-entity-documents-placeholder__status { flex-direction: row; align-items: center; }
}
@media (min-width: 900px) {
    .kp-documents-placeholder__controls { flex-direction: row; }
    .kp-documents-placeholder__field { width: 220px; }
    .kp-documents-placeholder__search { width: 260px; }
}
.kp-timeline-placeholder__events-title { display: flex; align-items: center; min-height: 32px; font-size: 20px; line-height: 28px; margin-bottom: 12px; font-weight: 500; }
.kp-timeline-placeholder__title { display: flex; align-items: center; min-height: 40px; font-size: 24px; line-height: 32px; font-weight: 500; }
.kp-timeline-placeholder__composer .kp-loading__item { min-height: 112px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; }
.kp-loading__label {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.kp-loading__items { display: flex; flex-direction: column; gap: 12px; }
.kp-loading__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; }
.kp-loading__avatar, .kp-loading__lines > span {
    display: block; background: #e2e8f0; border-radius: 4px;
    animation: kp-loading-pulse 1.8s ease-in-out infinite;
}
.kp-loading__avatar { flex: 0 0 36px; height: 36px; border-radius: 50%; }
.kp-loading__lines { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; }
.kp-loading__lines > span { height: 12px; width: 82%; }
.kp-loading__lines > span:first-child { width: 45%; }
.kp-loading__lines > span:last-child { width: 65%; height: 10px; }
.kp-loading--list .kp-loading__item { min-height: 76px; border-bottom: 1px solid #e2e8f0; }
.kp-loading--list .kp-loading__lines > span:last-child { display: none; }
.kp-loading--posts .kp-loading__item { min-height: 180px; align-items: flex-start; border: 1px solid #e2e8f0; border-radius: 4px; background: white; }
.kp-loading--posts .kp-loading__lines { gap: 18px; padding-top: 6px; }
.kp-loading--posts .kp-loading__lines > span:nth-child(2) { height: 48px; width: 95%; }
.kp-loading--events .kp-loading__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kp-loading--events .kp-loading__item { min-height: 188px; align-items: flex-start; padding-top: 24px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; }
.kp-loading--events .kp-loading__avatar { display: none; }
.kp-loading--events .kp-loading__lines { gap: 20px; }
.kp-loading--events .kp-loading__item:nth-child(n+3) { display: none; }
.kp-loading--form .kp-loading__item { min-height: 80px; }
.kp-loading--form .kp-loading__avatar { display: none; }
.kp-loading--form .kp-loading__lines > span:first-child { width: 28%; }
.kp-loading--form .kp-loading__lines > span:nth-child(2) { height: 40px; width: 100%; }
.kp-loading--form .kp-loading__lines > span:last-child { display: none; }
.kp-loading--table { border: 1px solid #e2e8f0; border-radius: 4px; }
.kp-loading--table .kp-loading__items { gap: 0; }
.kp-loading--table .kp-loading__item { min-height: 56px; border-bottom: 1px solid #e2e8f0; }
.kp-loading--table .kp-loading__item:first-child { min-height: 72px; }
.kp-loading--table .kp-loading__avatar { display: none; }
.kp-loading--table .kp-loading__lines { flex-direction: row; gap: 24px; align-items: center; }
.kp-loading--table .kp-loading__lines > span { width: 25%; height: 12px; }
.kp-loading--calendar .kp-loading__items { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: #e2e8f0; border: 1px solid #e2e8f0; }
.kp-loading--calendar .kp-loading__item { min-height: 100px; background: white; padding: 12px 6px; }
.kp-loading--calendar .kp-loading__avatar { display: none; }
.kp-refresh { min-height: 20px; color: #64748b; font-size: 12px; }
.kp-grid-region { min-height: 420px; min-width: 0; }
.MuiDataGrid-root.kp-stable-grid, .kp-grid-region .MuiDataGrid-root { min-height: 420px; --DataGrid-overlayHeight: 320px; }
.kp-events-region { min-height: 188px; }
.kp-mount-error { padding: 24px; color: #b91c1c; }
@media (min-width: 900px) {
    .kp-loading--events .kp-loading__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kp-loading--events .kp-loading__item:nth-child(3) { display: flex; }
}
@keyframes kp-loading-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .kp-loading__avatar, .kp-loading__lines > span, .MuiSkeleton-root, .MuiSkeleton-root::after,
    .kp-attendance-placeholder__rank, .kp-attendance-placeholder__name, .kp-attendance-placeholder__count, .kp-attendance-placeholder__avatar { animation: none !important; }
}