/* Page-level skeleton overlay (first paint until custodian:page-ready / DOM ready) */

html.custodian-skeleton-active {
  overflow: hidden;
}

.custodian-skeleton-layer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: auto;
  pointer-events: none;
}

html:not(.custodian-skeleton-active) .custodian-skeleton-layer {
  display: none !important;
}

.custodian-skeleton-layer--app {
  background: rgb(243 244 246);
}

html.dark .custodian-skeleton-layer--app,
.dark .custodian-skeleton-layer--app {
  background: rgb(17 24 39);
}

.custodian-skeleton-layer--auth {
  background: rgb(209 213 219);
}

.custodian-skeleton-layer--widget {
  background: #ffffff;
}

html.dark .custodian-skeleton-layer--widget,
.dark .custodian-skeleton-layer--widget {
  background: #20252c;
}

html.dark .custodian-skeleton-layer--auth,
.dark .custodian-skeleton-layer--auth {
  background: rgb(17 24 39);
}

.custodian-skeleton-bone {
  border-radius: 0.5rem;
  background: linear-gradient(
    90deg,
    rgb(229 231 235) 0%,
    rgb(243 244 246) 50%,
    rgb(229 231 235) 100%
  );
  background-size: 200% 100%;
  animation: custodian-skeleton-shimmer 1.2s ease-in-out infinite;
}

html.dark .custodian-skeleton-bone,
.dark .custodian-skeleton-bone {
  background: linear-gradient(90deg, rgb(55 65 81) 0%, rgb(75 85 99) 50%, rgb(55 65 81) 100%);
  background-size: 200% 100%;
}

@keyframes custodian-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.custodian-skeleton-inner {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 1rem;
}

@media (min-width: 1024px) {
  .custodian-skeleton-inner--app {
    margin-left: 16rem;
  }
}

/* Inline / component skeletons (AJAX tables, etc.) */
.custodian-skeleton-row .custodian-skeleton-bone {
  height: 1rem;
  width: 100%;
}

.custodian-skeleton-table-skeleton td {
  padding: 0.75rem 1rem;
}

/* Form fields with leading icon (matches form-field-icons.css layout) */
.custodian-skeleton-field-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.custodian-skeleton-field-icon::after {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.375rem;
  background: linear-gradient(
    90deg,
    rgb(209 213 219) 0%,
    rgb(229 231 235) 50%,
    rgb(209 213 219) 100%
  );
  background-size: 200% 100%;
  animation: custodian-skeleton-shimmer 1.2s ease-in-out infinite;
}

html.dark .custodian-skeleton-field-icon::after,
.dark .custodian-skeleton-field-icon::after {
  background: linear-gradient(90deg, rgb(55 65 81) 0%, rgb(75 85 99) 50%, rgb(55 65 81) 100%);
  background-size: 200% 100%;
}

.custodian-skeleton-field-input {
  padding-inline-start: 2.625rem;
}