/* ==========================================================================
   SearchlyFlow Dashboard — Lade-Skeletons und Refresh-Button
   Aus dashboard.css (Legacy, siehe dashboard.legacy.css) herausgeloest.
   Lade-Reihenfolge in index.html beachten: Kaskade bleibt dadurch identisch.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Skeleton-Ladezustände für Datenbereiche (Tabellen, KPI-Karten, Charts).
   Werden von den Load-Funktionen in Render-Ziele geschrieben und beim
   Rendern der echten Daten automatisch überschrieben.
--------------------------------------------------------------------------- */

@keyframes dashboardSkeletonShimmer {
    0% {
        background-position: -200px 0;
    }

    100% {
        background-position: 200px 0;
    }
}

.dashboard-skeleton-line,
.dashboard-skeleton-cell,
.dashboard-skeleton-kpi-value {
    display: block;
    border-radius: 4px;

    background: linear-gradient(
        90deg,
        #e8edf4 25%,
        #f4f7fb 50%,
        #e8edf4 75%
    );
    background-size: 400px 100%;
    animation: dashboardSkeletonShimmer 1.3s ease-in-out infinite;
}

.dashboard-skeleton-line {
    height: 14px;
    margin-bottom: 10px;
}

.dashboard-skeleton-line:last-child {
    margin-bottom: 0;
}

.dashboard-skeleton-line.is-title {
    height: 20px;
    width: 40%;
    margin-bottom: 16px;
}

.dashboard-skeleton-line.is-short {
    width: 45%;
}

.dashboard-skeleton-line.is-medium {
    width: 70%;
}

/* Tabellen: Skeleton-Zeilen direkt im tbody */
tr.dashboard-skeleton-row td {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* KPI-Karten-Skeleton (werden direkt in .stats-Container injiziert) */
.dashboard-skeleton-kpi {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
}

.dashboard-skeleton-kpi-label {
    height: 12px;
    width: 55%;
    margin-bottom: 14px;
}

.dashboard-skeleton-kpi-value {
    height: 30px;
    width: 45%;
    margin-bottom: 14px;
}

.dashboard-skeleton-kpi-footer {
    height: 10px;
    width: 70%;
}

/* Chart-Platzhalter */
.dashboard-skeleton-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.dashboard-skeleton-chart {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
}

.dashboard-skeleton-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.dashboard-skeleton-chart-header .dashboard-skeleton-line {
    margin-bottom: 0;
}

.dashboard-skeleton-chart-header .is-pill {
    height: 18px;
    width: 72px;
    border-radius: 999px;
}

.dashboard-skeleton-chart-body {
    height: 180px;
    border-radius: 4px;

    background: linear-gradient(
        90deg,
        #e8edf4 25%,
        #f4f7fb 50%,
        #e8edf4 75%
    );
    background-size: 400px 100%;
    animation: dashboardSkeletonShimmer 1.3s ease-in-out infinite;
}

/* Liste / Karten-Spalten (z. B. Scheduler-Feedliste) */
.dashboard-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-skeleton-list-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
}



.dashboard-refresh-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    padding: 10px 18px;
    border: 1px solid #334155;
    border-radius: 12px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.dashboard-refresh-btn:hover {
    background: #334155;
}

.dashboard-refresh-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.dashboard-refresh-btn.is-loading {
    opacity: 0.6;
}