/* ============================================================================
   Larkon Skeletons + Page Progress Bar (16-May-2026)
   - Top progress bar (NProgress-style) shows on navigation away
   - Reusable shimmer placeholders for slow data sections

   Mark up a placeholder:
     <div class="larkon-skel skel-line" style="width:60%"></div>
     <div class="larkon-skel skel-circle" style="width:36px;height:36px"></div>
     <div class="larkon-skel skel-card" style="height:120px"></div>
   ============================================================================ */

#larkon-page-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5px;
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 50%, #86efac 100%);
    box-shadow: 0 0 8px rgba(34, 197, 94, .55);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .25s ease-out, opacity .2s ease;
    z-index: 11000;
    opacity: 0;
    pointer-events: none;
}
#larkon-page-progress.is-active {
    opacity: 1;
}

.larkon-skel {
    background: linear-gradient(90deg,
        rgba(148, 163, 184, .08) 0%,
        rgba(148, 163, 184, .20) 50%,
        rgba(148, 163, 184, .08) 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: larkon-skel-shimmer 1.4s linear infinite;
    display: block;
}
html[data-bs-theme="light"] .larkon-skel {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .04) 0%,
        rgba(0, 0, 0, .09) 50%,
        rgba(0, 0, 0, .04) 100%);
    background-size: 200% 100%;
}

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

.skel-line { height: 13px; margin: 6px 0; border-radius: 4px; width: 100%; }
.skel-line.skel-sm { height: 10px; }
.skel-line.skel-lg { height: 18px; }
.skel-line.skel-title { height: 22px; width: 40%; }

.skel-circle { width: 36px; height: 36px; border-radius: 50%; }

.skel-card {
    height: 120px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.skel-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
}

/* Skeleton table — drop-in replacement while data loads */
.larkon-skel-table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 0;
}
.larkon-skel-table .skel-row {
    border-bottom: 1px solid rgba(148, 163, 184, .08);
}
.larkon-skel-table .skel-row:last-child {
    border-bottom: 0;
}

/* When a section flips from skeleton to real content, fade in nicely */
.larkon-fade-in {
    animation: larkon-fade-in .35s ease;
}
@keyframes larkon-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   Auto-skeleton for ApexCharts containers (16-May-2026).
   Any element that uses ApexCharts and is currently empty (not yet rendered)
   gets a soft shimmer background. Once ApexCharts calls .render() it injects
   an <svg> child, the :empty pseudo-class no longer matches, and the shimmer
   disappears automatically. Zero-touch enhancement for every chart page.
   ============================================================================ */
body.tw-shell .apex-charts:empty,
body.tw-shell [id^="ceo-"]:empty,
body.tw-shell [id^="chart"]:empty,
body.tw-shell [id^="fe-deuda-"]:empty,
body.tw-shell [id^="feChart"]:empty,
body.tw-shell [id^="feCred"]:empty,
body.tw-shell [id^="feEd"]:empty,
body.tw-shell [id^="fePeq"]:empty,
body.tw-shell [id^="feSc"]:empty {
    background: linear-gradient(90deg,
        rgba(148, 163, 184, .08) 0%,
        rgba(148, 163, 184, .18) 50%,
        rgba(148, 163, 184, .08) 100%);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: larkon-skel-shimmer 1.4s linear infinite;
}
html[data-bs-theme="light"] body.tw-shell .apex-charts:empty,
html[data-bs-theme="light"] body.tw-shell [id^="ceo-"]:empty,
html[data-bs-theme="light"] body.tw-shell [id^="chart"]:empty,
html[data-bs-theme="light"] body.tw-shell [id^="fe-deuda-"]:empty,
html[data-bs-theme="light"] body.tw-shell [id^="feChart"]:empty,
html[data-bs-theme="light"] body.tw-shell [id^="feCred"]:empty,
html[data-bs-theme="light"] body.tw-shell [id^="feEd"]:empty,
html[data-bs-theme="light"] body.tw-shell [id^="fePeq"]:empty,
html[data-bs-theme="light"] body.tw-shell [id^="feSc"]:empty {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .04) 0%,
        rgba(0, 0, 0, .09) 50%,
        rgba(0, 0, 0, .04) 100%);
    background-size: 200% 100%;
}