/* Shared by server placeholders and React. Deliberately independent of JS,
   Tailwind's runtime stylesheet and the deferred MUI bundle. */
.kp-app-shell { --kp-mobile-nav-height: 0px; }
.kp-mobile-nav { display: none; }
@media (max-width: 1023px) {
    .kp-app-shell--mobile-nav { --kp-mobile-nav-height: calc(64px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--kp-mobile-nav-height); }
    .kp-app-shell--mobile-assistant { padding-bottom: calc(var(--kp-mobile-nav-height) + 8px); }
    .kp-mobile-nav { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: var(--kp-mobile-nav-height); box-sizing: border-box; padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); border-top: 1px solid #e2e8f0; background: #fff; }
    .kp-mobile-nav--assistant { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .kp-mobile-nav--assistant > * { grid-row: 1; }
    .kp-mobile-nav--assistant [data-onboarding="mobile-nav-dashboard"] { grid-column: 1; }
    .kp-mobile-nav--assistant [data-onboarding="mobile-nav-events"] { grid-column: 2; }
    .kp-mobile-nav--assistant .kp-mobile-nav__assistant-slot { grid-column: 3; }
    .kp-mobile-nav--assistant [data-onboarding="mobile-nav-events-training"] { grid-column: 4; }
    .kp-mobile-nav--assistant [data-onboarding="mobile-nav-members"], .kp-mobile-nav--assistant [data-onboarding="mobile-nav-education"] { grid-column: 5; }
    .kp-mobile-nav__link { display: flex; min-width: 0; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #64748b; font: 500 11px/14px Inter, sans-serif; text-decoration: none; -webkit-tap-highlight-color: transparent; }
    .kp-mobile-nav__icon { display: flex; width: 48px; height: 28px; align-items: center; justify-content: center; border-radius: 4px; }
    .kp-mobile-nav__icon .material-symbols-outlined { font-size: 24px; line-height: 1; }
    .kp-mobile-nav__link:hover, .kp-mobile-nav__link[aria-current="page"] { color: #0369a1; }
    .kp-mobile-nav__link[aria-current="page"] { font-weight: 600; }
    .kp-mobile-nav__link:hover .kp-mobile-nav__icon, .kp-mobile-nav__link[aria-current="page"] .kp-mobile-nav__icon { background: #f0f9ff; }
    .kp-mobile-nav__link:focus-visible { outline: 2px solid #0284c7; outline-offset: -2px; border-radius: 4px; }
    .kp-mobile-nav .kp-mobile-nav__link.kp-plan-lock--menu::before { content: none; }
    .kp-mobile-nav .kp-mobile-nav__link.kp-plan-lock--menu:hover { color: #0369a1 !important; }
    .kp-mobile-nav .kp-plan-lock--menu .kp-plan-lock-badge { top: 14px; right: auto; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
    .kp-mobile-nav__assistant-slot { position: relative; min-width: 0; }
    .kp-mobile-nav__assistant-content { display: flex; height: 48px; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; color: #64748b; font: 500 11px/14px Inter, sans-serif; }
    .kp-mobile-nav__assistant-content > button { flex-shrink: 0; width: 48px; height: 48px; }
    .kp-mobile-nav__assistant-content > button > span:first-child { width: 40px; height: 40px; }
    .kp-mobile-nav__assistant-content > button:focus-visible { outline: 2px solid #0284c7; outline-offset: 3px; }
    .kp-mobile-nav__assistant-content--open { color: #0369a1; }
    .kp-app-shell--mobile-nav .kp-ai-assistant-closed { bottom: calc(var(--kp-mobile-nav-height) + 1rem); }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .kp-app-shell--mobile-nav .kp-ai-assistant-root { bottom: calc(var(--kp-mobile-nav-height) + 1rem); }
    .kp-app-shell--mobile-nav [data-ai-assistant-open] { max-height: calc(100dvh - var(--kp-mobile-nav-height) - 2rem); }
}
.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-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.25rem; align-items: start; }
.kp-attendance-stats > * { min-width: 0; }
.kp-attendance-header { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.kp-attendance-header__title { display: flex; flex: 1 1 12rem; align-items: center; gap: .5rem; min-width: 0; }
.kp-attendance-header__title > .material-symbols-outlined { flex-shrink: 0; }
.kp-attendance-year { flex: 0 0 6rem; width: 6rem; min-width: 6rem; }
.kp-attendance-table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; }
.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:nth-child(2), .kp-attendance-table td:nth-child(2) { padding-inline: 0; }
.kp-attendance-table th { font-weight: 500; }
.kp-attendance-table th:first-child { width: 2.5rem; }
.kp-attendance-table th:last-child { width: 3.5rem; }
.kp-attendance-table th:first-child, .kp-attendance-table td:first-child,
.kp-attendance-table th:last-child, .kp-attendance-table td:last-child { padding-inline: .5rem; }
.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; max-width: 100%; min-width: 0; }
.kp-attendance-placeholder__count { width: 32px; }
.kp-attendance-placeholder__avatar { flex-shrink: 0; 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; }
}
/* Shared geometry also reserves the second navigation before React loads. */
.kp-section-nav { display: none; }
.kp-section-mobile { margin-bottom: 1.5rem; }
@media (max-width: 1023px) {
  .kp-section-page {
    --kp-section-gutter: 1rem;
    display: flex;
    flex-direction: column;
    padding-top: 0;
  }
  /* Let the identity precede banners and onboarding without moving React-owned DOM. */
  .kp-section-page > [data-component="portal-settings"] { display: contents; }
  .kp-section-page .kp-section-mobile {
    order: -1;
    margin-inline: calc(-1 * var(--kp-section-gutter));
    padding: 1rem var(--kp-section-gutter);
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .kp-section-page { --kp-section-gutter: 1.5rem; }
}
@media (min-width: 1024px) {
  .kp-section-page { margin-left: 16rem; }
  .kp-section-nav {
    display: block;
    position: fixed;
    inset: 0 auto 0 18rem;
    z-index: 20;
    width: 16rem;
    overflow-y: auto;
    padding: 0;
    background: #fff;
    border-right: 1px solid #e2e8f0;
  }
  .kp-section-mobile { display: none; }
}