/* ==========================================================================
   SearchlyFlow Dashboard — Bento-Übersicht (Analytics-Startseite)
   Kachel-Layout fuer pages/analytics.html. Alle Container-IDs, die das JS
   befuellt (analyticsStats, analyticsCharts, analyticsActionNeeded,
   analyticsTopOpportunities, *PreviewTable, recommendationsPreviewList),
   bleiben unveraendert — nur das Layout rundherum ist neu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero-Bereich
   -------------------------------------------------------------------------- */

.overview-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.overview-hero h1 {
    font-size: 26px;
    letter-spacing: -0.02em;
    margin: 0;
}

.overview-hero p {
    color: var(--sf-text-muted, #64748b);
    margin: 8px 0 0;
    font-size: 14.5px;
    max-width: 640px;
}

/* Refresh-Button im Hero: statisch positionieren (Basis ist absolute) */
.overview-hero .dashboard-refresh-btn {
    position: static;
    transform: none;
}

/* --------------------------------------------------------------------------
   Bento-Grundriss
   -------------------------------------------------------------------------- */

.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.bento > * {
    min-width: 0;
}

/* KPI-Reihe: volle Breite, 5 Kacheln */
.bento-kpis {
    grid-column: span 12;
}

/* Charts links (8), Aktions-Spalte rechts (4) */
.bento-charts {
    grid-column: span 8;
}

.bento-side {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Vorschau-Karten + Empfehlungen: volle Breite */
.bento-previews {
    grid-column: span 12;
}

.bento-recommendations {
    grid-column: span 12;
}

@media (max-width: 1100px) {
    .bento-charts,
    .bento-side {
        grid-column: span 12;
    }
}

/* --------------------------------------------------------------------------
   KPI-Kacheln
   -------------------------------------------------------------------------- */

/* Die KPI-Karten werden vom JS als .card in #analyticsStats gerendert */
#analyticsStats.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 0;
}

@media (min-width: 1400px) {
    #analyticsStats.stats {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Kacheln nutzen das zentrale .kpi-tile-Design (Akzentbalken inklusive) */
#analyticsStats .kpi-tile {
    margin-bottom: 0;
}

#analyticsStats .kpi-tile-value {
    font-size: 30px;
}

/* Trend-Badges sollen nicht umbrechen */
#analyticsStats .kpi-trend {
    white-space: nowrap;
}

#analyticsStats .kpi-footer {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* --------------------------------------------------------------------------
   Chart-Kacheln (JS rendert .analytics-chart-grid in #analyticsCharts)
   -------------------------------------------------------------------------- */

#analyticsCharts .analytics-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px;
    margin-top: 0;
}

@media (max-width: 700px) {
    #analyticsCharts .analytics-chart-grid {
        grid-template-columns: 1fr !important;
    }
}

#analyticsCharts .analytics-chart-card {
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e2e8f0);
    border-radius: var(--sf-radius, 14px);
    box-shadow: var(--sf-shadow, 0 4px 16px rgba(15, 23, 42, 0.07));
    padding: 20px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#analyticsCharts .analytics-chart-card:hover {
    box-shadow: var(--sf-shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.10));
    transform: translateY(-2px);
}

#analyticsCharts .analytics-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

#analyticsCharts .analytics-chart-header h3 {
    font-size: 15px;
    margin: 0;
    letter-spacing: -0.01em;
}

#analyticsCharts canvas {
    max-height: 220px;
}

/* Skeleton im Chart-Bereich an das Bento-Raster anpassen */
#analyticsCharts .dashboard-skeleton-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* --------------------------------------------------------------------------
   Seitenspalte: Handlungsbedarf + Chancen
   -------------------------------------------------------------------------- */

.bento-side .section-header {
    margin-bottom: 4px;
}

.bento-side .section-header h2 {
    font-size: 17px;
}

.bento-side .analytics-action-needed-grid,
.bento-side .analytics-opportunities-grid {
    grid-template-columns: 1fr;
    margin-top: 10px;
}

/* Beide Sektionen als Bento-Kacheln mit Akzentbalken */
.bento-side .analytics-action-needed-section,
.bento-side .analytics-opportunities-section {
    position: relative;
    overflow: hidden;
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e2e8f0);
    border-radius: var(--sf-radius, 14px);
    box-shadow: var(--sf-shadow, 0 4px 16px rgba(15, 23, 42, 0.07));
    padding: 20px;
}

.bento-side .analytics-action-needed-section::before,
.bento-side .analytics-opportunities-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    opacity: 0.55;
}

/* Handlungsbedarf = amber, Größte Chancen = grün */
.bento-side .analytics-action-needed-section::before {
    background: #d97706;
}

.bento-side .analytics-opportunities-section::before {
    background: #16a34a;
}

/* --------------------------------------------------------------------------
   Vorschau-Karten (Tabellen)
   -------------------------------------------------------------------------- */

.analytics-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 0;
}

@media (max-width: 1200px) {
    .analytics-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .analytics-preview-grid {
        grid-template-columns: 1fr;
    }
}

.analytics-preview-card {
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e2e8f0);
    border-radius: var(--sf-radius, 14px);
    box-shadow: var(--sf-shadow, 0 4px 16px rgba(15, 23, 42, 0.07));
    padding: 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Akzentbalken oben, wie auf den KPI-Kacheln */
.analytics-preview-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--sf-primary, #4f46e5);
    opacity: 0.55;
}

.analytics-preview-card h3 {
    font-size: 15px;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.analytics-preview-card .small {
    margin: 0 0 10px;
    font-size: 13px;
}

.analytics-preview-card table {
    font-size: 13.5px;
}

.analytics-preview-card .preview-link {
    margin-top: auto;
    padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Empfehlungen-Kachel
   -------------------------------------------------------------------------- */

/* Empfehlungen-Kachel: gleiche Bento-Optik wie KPI-/Vorschau-Kacheln */
.bento-recommendations .card {
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e2e8f0);
    border-radius: var(--sf-radius, 14px);
    box-shadow: var(--sf-shadow, 0 4px 16px rgba(15, 23, 42, 0.07));
}

.bento-recommendations .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--sf-primary, #4f46e5);
    opacity: 0.55;
}


/* --------------------------------------------------------------------------
   Wiederverwendbare KPI-Kacheln (z. B. Feeds-Bento)
   -------------------------------------------------------------------------- */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.kpi-tile {
    position: relative;
    overflow: hidden;
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e2e8f0);
    border-radius: var(--sf-radius, 14px);
    box-shadow: var(--sf-shadow, 0 4px 16px rgba(15, 23, 42, 0.07));
    padding: 20px;
}

.kpi-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--sf-primary, #4f46e5);
    opacity: 0.55;
}

.kpi-tile.is-critical::before { background: #dc2626; }
.kpi-tile.is-warning::before { background: #d97706; }

.kpi-tile-label {
    color: var(--sf-text-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.kpi-tile-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sf-text, #0f172a);
}

/* Feeds: Aufmerksamkeits-Kachel */
.feeds-attention-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--sf-surface, #fff);
    border: 1px solid var(--sf-border, #e2e8f0);
    border-left: 5px solid #dc2626;
    border-radius: var(--sf-radius, 14px);
    box-shadow: var(--sf-shadow, 0 4px 16px rgba(15, 23, 42, 0.07));
    padding: 16px 20px;
    margin-bottom: 16px;
}

.feeds-attention-tile p {
    margin: 6px 0 0;
    color: var(--sf-text-muted, #64748b);
    font-size: 13.5px;
}


/* --------------------------------------------------------------------------
   Seitenkopf mit Aktualisieren-Button (Analytics-Detailseiten)
   -------------------------------------------------------------------------- */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-head > div {
    flex: 1 1 420px;
    min-width: 0;
}

.page-head h2 {
    margin-top: 0;
}

.page-head .small {
    margin-bottom: 0;
}

.page-head .dashboard-refresh-btn {
    position: static;
    transform: none;
    flex-shrink: 0;
    margin-top: 2px;
}


/* --------------------------------------------------------------------------
   Scheduler-Kopf: Worker-Status + Refresh-Button
   -------------------------------------------------------------------------- */

#section_scheduler .scheduler-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Refresh-Button im Scheduler-Kopf: statisch positionieren (Basis ist absolute) */
#section_scheduler .scheduler-header .dashboard-refresh-btn {
    position: static;
    transform: none;
}

/* Refresh-Button in der Design-Layer-Topbar: statisch positionieren (Basis ist absolute) */
.design-layer-suite .suite-topbar .dashboard-refresh-btn {
    position: static;
    transform: none;
    flex-shrink: 0;
}