/*
 * skeleton.css: skeleton loading (grey shapes in the page's layout, with a soft shimmer) while a page's content loads.
 *
 * - The page skeleton (Views/Shared/_PageSkeleton.cshtml) covers the content area from the first paint until
 *   js/skeleton.js says the page is ready. The real content is laid out underneath (visibility: hidden keeps its size,
 *   so maps and charts measure correctly) and is shown the moment the skeleton goes.
 * - Parts of a page that load later (a list after Refresh, a table after a filter) use the same shapes: .skel and the
 *   helpers in js/skeleton.js.
 * - Light shapes on white pages; .skel-dark on the dark map card.
 */

:root {
    --skel-base: #e9e8f3;
    --skel-shine: #f6f5fb;
    --skel-dark-base: #2a2863;
    --skel-dark-shine: #3a3880;
}

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

    to {
        background-position: -100% 0;
    }
}

.skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--skel-base) 25%, var(--skel-shine) 50%, var(--skel-base) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}

.skel-dark .skel,
.skel.skel--dark {
    background: linear-gradient(90deg, var(--skel-dark-base) 25%, var(--skel-dark-shine) 50%, var(--skel-dark-base) 75%);
    background-size: 200% 100%;
}

.skel--title { height: 30px; width: min(360px, 70%); margin-bottom: 14px; }
.skel--line { height: 12px; margin: 8px 0; }
.skel--line-short { width: 40%; }
.skel--line-mid { width: 65%; }
.skel--pill { height: 36px; width: 120px; border-radius: 8px; }
.skel--input { height: 38px; flex: 1 1 160px; border-radius: 8px; }
.skel--badge { height: 26px; width: 30px; border-radius: 999px; flex: 0 0 auto; }
.skel--thumb { height: 72px; width: 96px; border-radius: 8px; flex: 0 0 auto; }
.skel--block { height: 100%; min-height: 160px; border-radius: 10px; }

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

.skel-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 18px;
}

.skel-card {
    border: 1px solid #dcdbea;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}

.skel-dark .skel-card,
.skel-card.skel-card--dark {
    border-color: var(--shell-border-strong, #3a3880);
    background: var(--shell-surface, #1c1b4a);
}

.skel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.skel-table .skel-row {
    padding: 12px 0;
    border-bottom: 1px solid #ecebf5;
}

    .skel-table .skel-row > .skel {
        height: 12px;
        flex: 1 1 0;
    }

/* Table rows while a table's body loads (Skeleton.tableRows). */
.skel-tr td {
    padding: 14px 10px !important;
    border-bottom: 1px solid #ecebf5;
}

/* ---- The page skeleton -------------------------------------------------- */

#mainContent {
    position: relative;
}

.skel-page {
    display: none;
}

html.skel-loading .skel-page {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    min-height: 70vh;
    z-index: 5;
    padding: 4px 4px 32px;
    background: var(--shell-content, #fff);
}

html.skel-loading #mainContent {
    min-height: 70vh;
}

    /* The old "Loading Dashboard..." line: the skeleton says it. */
    html.skel-loading #mainContent > #loading {
        display: none;
    }

    /* Laid out, but not seen or reachable until the page is ready. */
    html.skel-loading #mainContent > main {
        visibility: hidden;
    }

html.skel-ending .skel-page {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 5;
    padding: 4px 4px 32px;
    background: var(--shell-content, #fff);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ---- A skeleton over one part of a page (Skeleton.cover) ----------------- */

.skel-covered {
    position: relative;
}

.skel-cover {
    position: absolute;
    inset: 0;
    z-index: 1100; /* above Leaflet's panes and controls (up to 1000) */
    overflow: hidden;
    padding: 18px;
    background: var(--shell-content, #fff);
    transition: opacity 0.2s ease;
}

    .skel-cover.skel-dark {
        background: var(--map-surface, #1c1b4a);
        border-radius: 0 0 14px 14px;
    }

    .skel-cover > .skel-map__body {
        margin-top: 0;
        height: 100%;
        min-height: 0;
    }

.skel-cover--ending {
    opacity: 0;
    pointer-events: none;
}

/* Stations / Carriages with nothing picked yet: the small card with its heading and dropdown. */
.skel-picker {
    max-width: 640px;
    margin: 24px auto 0;
    padding: 28px;
    border-radius: 14px;
    background: var(--map-surface, #1c1b4a);
}

/* The dashboard and the mapping pages. */
.skel-dash__bar {
    height: 64px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.skel-dash__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

.skel-map {
    border-radius: 14px;
    padding: 14px 18px;
    background: var(--map-surface, #1c1b4a);
}

.skel-map__body {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    min-height: 520px;
}

    .skel-map__body > .skel--block {
        flex: 1 1 auto;
        height: auto; /* stretched to the row's height (the map's) */
    }

.skel-map__side {
    flex: 0 0 min(340px, 35%);
}

@media (max-width: 991.98px) {
    .skel-dash__grid {
        grid-template-columns: 1fr;
    }

    .skel-map__body {
        flex-direction: column;
        min-height: 0;
    }

        .skel-map__body > .skel--block {
            min-height: 320px;
        }

    .skel-map__side {
        flex: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skel {
        animation: none;
    }

    html.skel-ending .skel-page,
    .skel-cover {
        transition: none;
    }
}