/* Shared loading skeleton for the ProAbsen panel. */
.proabsen-page-skeleton {
    --proabsen-skeleton-bg: #f5f8fc;
    --proabsen-skeleton-surface: #ffffff;
    --proabsen-skeleton-line: #e3eaf3;
    --proabsen-skeleton-line-soft: #edf2f7;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: block;
    overflow: auto;
    color: #64748b;
    background: var(--proabsen-skeleton-bg);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease, visibility .22s ease;
}

.proabsen-page-skeleton.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Keep the real panel header and sidebar visible while the content loads. */
.proabsen-page-skeleton:not(.proabsen-page-skeleton--auth):not(.proabsen-page-skeleton--document) {
    top: 70px;
    right: 0;
    bottom: 0;
    left: 252px;
}

.proabsen-page-skeleton--document {
    top: 72px;
    right: 0;
    bottom: 0;
    left: 0;
}

.proabsen-skeleton__main {
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    padding: 32px clamp(20px, 4vw, 52px) 48px;
}

.proabsen-skeleton__toolbar,
.proabsen-skeleton__card-row,
.proabsen-skeleton__panel-head,
.proabsen-skeleton__profile-card,
.proabsen-skeleton__filter-bar,
.proabsen-skeleton__form-actions {
    display: flex;
    align-items: center;
}

.proabsen-skeleton__toolbar {
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
    margin-bottom: 24px;
}

.proabsen-skeleton__toolbar-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.proabsen-skeleton__toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.proabsen-skeleton__stat-grid,
.proabsen-skeleton__card-grid,
.proabsen-skeleton__dashboard-grid,
.proabsen-skeleton__detail-grid {
    display: grid;
    gap: 18px;
}

.proabsen-skeleton__stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.proabsen-skeleton__dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
.proabsen-skeleton__detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
.proabsen-skeleton__card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }

.proabsen-skeleton__card {
    box-sizing: border-box;
    min-width: 0;
    padding: 22px;
    overflow: hidden;
    background: var(--proabsen-skeleton-surface);
    border: 1px solid #e3eaf3;
    border-radius: 14px;
}

.proabsen-skeleton__stat-card { min-height: 142px; }
.proabsen-skeleton__chart-card { min-height: 252px; }
.proabsen-skeleton__card--wide { min-height: 250px; }
.proabsen-skeleton__panel-head { justify-content: space-between; gap: 18px; min-width: 0; }

.proabsen-skeleton__filter-bar {
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    margin-bottom: 18px;
    padding: 14px;
    background: var(--proabsen-skeleton-surface);
    border: 1px solid #e3eaf3;
    border-radius: 12px;
}

.proabsen-skeleton__field {
    display: block;
    flex: 1 1 180px;
    width: 100%;
    max-width: 260px;
    height: 42px;
    overflow: hidden;
    background: var(--proabsen-skeleton-line-soft);
    border: 1px solid #e3eaf3;
    border-radius: 8px;
}

.proabsen-skeleton__form-card { padding: clamp(18px, 3vw, 28px); }
.proabsen-skeleton__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin-top: 26px; }
.proabsen-skeleton__form-field { min-width: 0; }
.proabsen-skeleton__form-field .proabsen-skeleton__field { max-width: none; margin-top: 10px; }
.proabsen-skeleton__form-actions { justify-content: flex-end; gap: 10px; margin-top: 28px; }

.proabsen-skeleton__detail-row {
    display: grid;
    grid-template-columns: minmax(80px, .75fr) minmax(0, 1.3fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
    margin-top: 22px;
}

.proabsen-skeleton__table-heading,
.proabsen-skeleton__table-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: center;
    min-width: 0;
}

.proabsen-skeleton__table-heading { padding-bottom: 16px; border-bottom: 1px solid #edf2f7; }
.proabsen-skeleton__table-row { margin-top: 20px; }

.proabsen-skeleton__profile-card {
    gap: 18px;
    min-width: 0;
    padding: 22px;
    background: var(--proabsen-skeleton-surface);
    border: 1px solid #e3eaf3;
    border-radius: 14px;
}

.proabsen-skeleton__profile-card .proabsen-skeleton__toolbar-copy { min-width: 0; }
.proabsen-skeleton__profile-card > .proabsen-skeleton__button { margin-left: auto; }

.proabsen-skeleton__calendar-card { min-height: 400px; }
.proabsen-skeleton__calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.proabsen-skeleton__calendar-day {
    display: block;
    width: min(100%, 30px);
    aspect-ratio: 1;
    margin: auto;
    background: var(--proabsen-skeleton-line);
    border-radius: 50%;
}

.proabsen-skeleton__chart {
    position: relative;
    height: 138px;
    margin-top: 26px;
    overflow: hidden;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, #edf2f7 34px), linear-gradient(135deg, transparent 0 12%, var(--proabsen-skeleton-line) 13% 15%, transparent 16% 27%, var(--proabsen-skeleton-line) 28% 30%, transparent 31% 45%, var(--proabsen-skeleton-line) 46% 48%, transparent 49% 65%, var(--proabsen-skeleton-line) 66% 68%, transparent 69%);
    border-bottom: 1px solid #dbe4ee;
    border-radius: 8px;
}

.proabsen-skeleton__chart::after,
.proabsen-skeleton__line::after,
.proabsen-skeleton__circle::after,
.proabsen-skeleton__button::after,
.proabsen-skeleton__field::after,
.proabsen-skeleton__calendar-day::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .68) 48%, transparent 76%);
    transform: translateX(-100%);
    animation: proabsen-skeleton-shimmer 1.35s ease-in-out infinite;
}

.proabsen-skeleton__line,
.proabsen-skeleton__circle,
.proabsen-skeleton__button,
.proabsen-skeleton__field,
.proabsen-skeleton__calendar-day {
    position: relative;
    overflow: hidden;
    background: var(--proabsen-skeleton-line);
}

.proabsen-skeleton__line { display: block; width: 100%; max-width: 100%; height: 12px; border-radius: 6px; }
.proabsen-skeleton__line--title { width: min(290px, 70%); height: 24px; border-radius: 8px; }
.proabsen-skeleton__line--subtitle { width: min(410px, 86%); height: 11px; margin-top: 11px; background: var(--proabsen-skeleton-line-soft); }
.proabsen-skeleton__line--short { width: 42%; }
.proabsen-skeleton__line--tiny { width: 25%; height: 9px; background: var(--proabsen-skeleton-line-soft); }
.proabsen-skeleton__line--field { height: 42px; margin-top: 14px; border-radius: 9px; background: var(--proabsen-skeleton-line-soft); }
.proabsen-skeleton__circle { display: block; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; }
.proabsen-skeleton__circle--large { width: 56px; height: 56px; }
.proabsen-skeleton__button { display: block; width: 112px; height: 40px; border-radius: 8px; }

@keyframes proabsen-skeleton-shimmer {
    100% { transform: translateX(100%); }
}

.proabsen-page-skeleton--auth {
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: linear-gradient(145deg, #eff6ff, #f8fafc);
}

.proabsen-skeleton__auth-card {
    box-sizing: border-box;
    width: min(100%, 440px);
    padding: 34px;
    background: var(--proabsen-skeleton-surface);
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(15, 59, 120, .08);
}

.proabsen-skeleton__auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; }
.proabsen-skeleton__auth-field { margin-top: 18px; }
.proabsen-skeleton__auth-button { width: 100%; height: 46px; margin-top: 24px; }

.proabsen-page-skeleton--document { background: var(--proabsen-skeleton-bg); }
.proabsen-skeleton__document {
    box-sizing: border-box;
    width: min(calc(100% - 40px), 1000px);
    margin: 28px auto;
    padding: clamp(24px, 4vw, 42px);
    background: var(--proabsen-skeleton-surface);
    border: 1px solid #e5eaf1;
    border-radius: 16px;
}

.proabsen-skeleton__document .proabsen-skeleton__line { margin-top: 18px; }
.proabsen-skeleton__document .proabsen-skeleton__line--title { margin-top: 0; }

@media (max-width: 1199.98px) {
    .proabsen-skeleton__stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .proabsen-skeleton__card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .proabsen-page-skeleton:not(.proabsen-page-skeleton--auth):not(.proabsen-page-skeleton--document) { top: 58px; left: 0; }
    .proabsen-page-skeleton--document { top: 64px; }
    .proabsen-skeleton__main { padding: 24px 16px 40px; }
    .proabsen-skeleton__detail-grid { grid-template-columns: 1fr; }
    .proabsen-skeleton__toolbar { margin-bottom: 20px; }
}

@media (max-width: 575.98px) {
    .proabsen-skeleton__main { padding: 18px 12px 32px; }
    .proabsen-skeleton__toolbar { align-items: flex-start; }
    .proabsen-skeleton__toolbar-actions { display: none; }
    .proabsen-skeleton__stat-grid,
    .proabsen-skeleton__dashboard-grid,
    .proabsen-skeleton__card-grid,
    .proabsen-skeleton__form-grid { grid-template-columns: 1fr; }
    .proabsen-skeleton__card { padding: 17px; }
    .proabsen-skeleton__profile-card { align-items: flex-start; flex-wrap: wrap; padding: 17px; }
    .proabsen-skeleton__profile-card .proabsen-skeleton__toolbar-copy { flex: 1 1 calc(100% - 78px); }
    .proabsen-skeleton__profile-card > .proabsen-skeleton__button { flex-basis: 100%; width: 100% !important; margin-left: 0; }
    .proabsen-skeleton__table-heading,
    .proabsen-skeleton__table-row { gap: 8px; }
    .proabsen-skeleton__document { width: calc(100% - 28px); margin: 16px auto; padding: 24px 18px; }
    .proabsen-skeleton__auth-card { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .proabsen-skeleton__chart::after,
    .proabsen-skeleton__line::after,
    .proabsen-skeleton__circle::after,
    .proabsen-skeleton__button::after,
    .proabsen-skeleton__field::after,
    .proabsen-skeleton__calendar-day::after { animation: none; }
    .proabsen-page-skeleton { transition: none; }
}