/*
 * De ce exista:
 * Acest fisier tine stilurile pentru ecranul dedicat de analytics simplu din
 * Pro Beta.
 *
 * Responsabilitate:
 * Face KPI-urile, topurile si starile locked/empty usor de parcurs pe mobil si
 * desktop, fara sa rupa limbajul vizual worker.
 *
 * Ce NU face:
 * Nu decide entitlement-uri si nu interpreteaza datele comerciale.
 *
 * Depinde de:
 * tpl-screen-worker-analytics si clasele shared app-v2.
 */

.v2-screen--worker-analytics {
    display: grid;
    gap: 20px;
}

.v2-worker-analytics-hero {
    margin-bottom: 0;
    padding: 20px 17px 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(22, 163, 74, 0.18), transparent 36%),
        radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.2), transparent 34%),
        linear-gradient(160deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.97));
    border: 1px solid rgba(22, 163, 74, 0.12);
    box-shadow:
        0 20px 42px rgba(17, 24, 39, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.v2-worker-analytics-status-card,
.v2-worker-analytics-panel {
    display: grid;
    gap: 14px;
    padding: 17px;
    border-color: rgba(209, 213, 219, 0.84);
    box-shadow:
        0 18px 36px rgba(17, 24, 39, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.v2-worker-analytics-status-card {
    background:
        radial-gradient(circle at top left, rgba(220, 252, 231, 0.68), transparent 35%),
        #ffffff;
}

.v2-worker-analytics-panel {
    background:
        radial-gradient(circle at top right, rgba(220, 252, 231, 0.42), transparent 34%),
        linear-gradient(180deg, #ffffff, rgba(248, 250, 252, 0.98));
}

.v2-worker-analytics-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.v2-worker-analytics-grid {
    display: grid;
    gap: 14px;
}

.v2-worker-analytics-kpi-grid,
.v2-worker-analytics-teaser-grid {
    display: grid;
    gap: 12px;
}

.v2-worker-analytics-kpi {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(249, 250, 251, 0.9);
    border: 1px solid rgba(229, 231, 235, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.v2-worker-analytics-panel .v2-button-row.is-compact {
    justify-content: stretch;
}

.v2-worker-analytics-panel .v2-button-row.is-compact .v2-button,
.v2-worker-analytics-panel .v2-button-row.is-compact .v2-button-secondary,
.v2-worker-analytics-panel .v2-button-row.is-compact .v2-button-ghost {
    flex: 1 1 150px;
    justify-content: center;
}

.v2-worker-analytics-kpi span {
    color: #4b5563;
    font-size: 0.92rem;
}

.v2-worker-analytics-kpi strong {
    color: #111827;
    font-size: 1.16rem;
}

.v2-worker-analytics-list {
    display: grid;
    gap: 10px;
}

.v2-worker-analytics-rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(229, 231, 235, 0.92);
}

.v2-worker-analytics-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.1);
    color: #166534;
    font-weight: 700;
    flex-shrink: 0;
}

.v2-worker-analytics-rank-copy {
    display: grid;
    gap: 4px;
    flex: 1;
}

.v2-worker-analytics-rank-copy strong {
    color: #111827;
}

.v2-worker-analytics-rank-copy p,
.v2-worker-analytics-list-empty p {
    margin: 0;
    color: #4b5563;
    line-height: 1.5;
}

.v2-worker-analytics-list-empty {
    padding: 14px;
    border-radius: 18px;
    border: 1px dashed rgba(209, 213, 219, 0.96);
    background: rgba(249, 250, 251, 0.82);
}

.v2-worker-analytics-preview {
    display: grid;
    gap: 10px;
    padding: 15px;
    border-radius: 20px;
    border: 1px solid rgba(191, 219, 254, 0.66);
    background:
        radial-gradient(circle at top right, rgba(219, 234, 254, 0.72), transparent 44%),
        rgba(255, 255, 255, 0.96);
}

.v2-worker-analytics-preview-copy {
    display: grid;
    gap: 6px;
}

.v2-worker-analytics-preview-copy strong,
.v2-worker-analytics-signal-card strong {
    color: #111827;
}

.v2-worker-analytics-preview-copy p,
.v2-worker-analytics-signal-card p,
.v2-worker-analytics-preview-note {
    margin: 0;
    color: #4b5563;
    line-height: 1.5;
}

.v2-worker-analytics-signal-grid {
    display: grid;
    gap: 8px;
}

.v2-worker-analytics-signal-card {
    display: grid;
    gap: 5px;
    padding: 13px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(219, 234, 254, 0.88);
}

@media (min-width: 720px) {
    .v2-worker-analytics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v2-worker-analytics-kpi-grid,
    .v2-worker-analytics-teaser-grid,
    .v2-worker-analytics-signal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}