/* Predictions page theme (scoped by .predictions-page to avoid bleeding) */
.predictions-page {
    background-color: #0b1526;
    color: #e3edf7;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
    padding: 1.5rem;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

    .predictions-page .muted {
        color: #90a3bf;
    }

    .predictions-page .accent-green {
        color: #2ad678;
    }

    .predictions-page .accent-blue {
        color: #fff;
    }

    .predictions-page .card-panel {
        background: #0f2235;
        border: 1px solid #1a2f45;
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
        padding: 1.25rem;
    }

    .predictions-page .page-grid {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .predictions-page .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .predictions-page .title-row {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

        .predictions-page .title-row i {
            color: hsl(142 70% 49%);
        }

    .predictions-page .title-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #2ad678;
        box-shadow: 0 0 10px rgba(42, 214, 120, 0.6);
    }

    .predictions-page .title {
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: #e9f3ff;
    }

    .predictions-page .subtext {
        margin-top: 0.1rem;
        font-size: 0.95rem;
        color: #9cb0cb;
    }

    .predictions-page .header-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .predictions-page .pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem 0.75rem;
        background: #122a44;
        border: 1px solid #1f3b5b;
        border-radius: 10px;
        color: #d4e4ff;
        font-size: 0.9rem;
    }

        .predictions-page .pill .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #2ad678;
            box-shadow: 0 0 8px rgba(42, 214, 120, 0.7);
        }

    .predictions-page .rz-button.prediction-action {
        background: linear-gradient(135deg, #16a34a, #22c55e);
        border: 1px solid #20b759;
        color: #eafff5;
        font-weight: 700;
        padding: 0.65rem 1.1rem;
        border-radius: 10px;
        box-shadow: 0 8px 18px rgba(34, 197, 94, 0.25);
    }

        .predictions-page .rz-button.prediction-action:hover {
            filter: brightness(1.05);
        }

        .predictions-page .rz-button.prediction-action:focus {
            box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35);
        }

    .predictions-page .stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1rem;
    }

    .predictions-page .stat-card {
        padding: 1rem;
        border-radius: 12px;
        background: linear-gradient(145deg, #0f2235, #0c1b2c);
        border: 1px solid #1c324a;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
        display: flex;
        align-items: center;
        justify-content: space-between
    }

        .predictions-page .stat-card.accuracy {
            background-image: linear-gradient(to bottom right, rgb(34 197 94 / .2), rgb(34 197 94 / .05));
        }

.progress-ring {
    --size: 100px;
    --thickness: 12px;
    --color: #2ecc71;
    --bg: rgba(255, 255, 255, 0.15);
    min-width: var(--size);
    height: var(--size);
    border-radius: 50%;
    /* Main magic */
    background: conic-gradient( var(--color) calc(var(--percent) * 1%), var(--bg) 0 );
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-ring {
    width: calc(var(--size) - var(--thickness) * 2);
    height: calc(var(--size) - var(--thickness) * 2);
    background: #1e2f33;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-dot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--color);
}

.center-second-dot {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 3px solid var(--color);
}

.center-third-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--color);
}

.progress-ring {
    animation: fill 1.2s ease-out forwards;
}

@keyframes fill {
    from {
        --percent: 0;
    }

    to {
    }
}

.predictions-page .stat-title {
    color: #9cb0cb;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.predictions-page .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: #e9f3ff;
}

    .predictions-page .stat-value sub {
        font-size: 14px;
        font-weight: 300;
        color: #a5a5a5;
    }

.predictions-page .stat-foot {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: #8aa1c3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.predictions-page .pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #c6d8f1;
}

.predictions-page .future-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.predictions-page .future-card {
    background: #0f2235;
    border: 1px solid #1a3048;
    border-radius: 12px;
    padding: 0.9rem;
}

.predictions-page .future-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #9cb0cb;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.predictions-page .bar {
    display: flex;
    height: 10px;
    background: #122a44;
    border-radius: 999px;
    overflow: hidden;
    margin: 0.25rem 0 0.5rem;
    gap: 0;
}

.predictions-page .bar-segment {
    height: 100%;
}

    .predictions-page .bar-segment.real {
        background: #22c55e;
    }

    .predictions-page .bar-segment.forecast {
        background: #60a5fa;
        /*        opacity: 0.55;*/
    }

.predictions-page .legend-row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    color: #9cb0cb;
    font-size: 0.9rem;
}

.predictions-page .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.predictions-page .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.predictions-page .tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem;
    background: #0f2235;
    border: 1px solid #1c324a;
    border-radius: 10px;
    flex-wrap: wrap;
    height: fit-content;
}

.predictions-page .tab-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #c7dbf5;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    height: auto;
    line-height: 1.2;
}

    .predictions-page .tab-btn.active {
        background: #142c45;
        border-color: #24456b;
    }

    .predictions-page .tab-btn:hover {
        background: rgba(255, 255, 255, 0.04);
    }

.predictions-page .chart-card {
    padding: 1.1rem;
}

.predictions-page .legend-item:last-child {
    margin-bottom: 6px;
}

.predictions-page .chart-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.predictions-page .chart-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #e4f0ff;
}

.predictions-page .chart-sub {
    font-size: 0.9rem;
    color: #9cb0cb;
}

.predictions-page .chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

    .predictions-page .chart-toolbar .rz-dropdown-label {
        color: #fff !important;
        margin-top: 4px;
    }

    .predictions-page .chart-toolbar .chart-dropdown {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }


.predictions-page .chart-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.predictions-page .rz-dropdown.prediction-dropdown {
    min-width: 180px;
    background: #0f2235;
    border: 1px solid #1f3b5b;
    border-radius: 10px;
    color: #d7e5fb;
}

.predictions-page .chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 0.75rem;
    color: #c7d9f5;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

    .predictions-page .chart-legend .legend-dot {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
    }

.predictions-page .table-card {
    padding: 1.1rem;
}

.predictions-page table.forecast-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.85rem;
}

    .predictions-page table.forecast-table thead th {
        text-align: left;
        font-weight: 700;
        color: #9cb0cb;
        padding: 0.55rem 0.4rem;
        border-bottom: 1px solid #1f3650;
        font-size: 0.9rem;
    }

table.forecast-table thead tr th {
    position: unset;
}

.predictions-page table.forecast-table tbody td {
    padding: 0.65rem 0.4rem;
    border-bottom: 1px solid #15263a;
    color: #dbe9ff;
    font-size: 0.95rem;
}

.predictions-page table.forecast-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.predictions-page .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}

.predictions-page .status-accurate {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.predictions-page .status-future {
    background: rgba(0, 0, 0, 0.1);
    color: #ccc;
    border: 1px solid hsl(215 25% 25%);
}

.predictions-page .status-review {
    background: rgba(248, 180, 0, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(248, 180, 0, 0.35);
}

.predictions-page .variance-positive {
    color: #4ade80;
    font-weight: 700;
}

.predictions-page .variance-negative {
    color: #f87171;
    font-weight: 700;
}

.predictions-page .orders-dual {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.predictions-page .orders-muted {
    color: #9cb0cb;
    font-size: 0.9rem;
}

.predictions-page .note-text {
    color: #7587a5;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.predictions-page .rz-chart {
    background: transparent;
}

    .predictions-page .rz-chart g text {
        fill: #9cb0cb;
    }

.predictions-page .rz-legend-item text {
    fill: #c7d9f5;
}

.predictions-page .rz-chart svg {
    border-radius: 10px;
    background: #0f2235;
}

.predictions-page .table-note {
    color: #92a7c7;
    font-size: 0.9rem;
    margin-top: 0.45rem;
}

.predictions-page .badge-future {
    color: #7dd3fc;
    font-weight: 700;
}

.predictions-page .section-title {
    font-weight: 700;
    color: #e9f3ff;
    font-size: 1rem;
}

.predictions-page .section-sub {
    color: #9cb0cb;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

@media (max-width: 960px) {
    .predictions-page {
        padding: 1rem;
    }

        .predictions-page .page-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .predictions-page .chart-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .predictions-page .chart-toolbar {
            width: 100%;
            justify-content: flex-start;
        }
}


.predictions-page .geo-card {
    padding: 1.2rem;
}



.predictions-page .geo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}



.predictions-page .geo-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #e9f3ff;
}



.predictions-page .geo-sub {
    color: #9cb0cb;
    margin-top: 0.2rem;
    font-size: 0.96rem;
}



.predictions-page .geo-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    align-items: stretch;
}



.predictions-page .geo-map {
    background: radial-gradient(circle at 40% 40%, rgba(255, 87, 87, 0.12) 0, transparent 38%), radial-gradient(circle at 60% 60%, rgba(76, 255, 102, 0.12) 0, transparent 45%), #0f2235;
    border: 1px dashed #1f3650;
    border-radius: 14px;
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.predictions-page .geo-map-overlay {
    text-align: center;
    color: #c6d8f1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}



.predictions-page .geo-pin {
    font-size: 2.4rem;
    opacity: 0.8;
}



.predictions-page .geo-map-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #dce9ff;
}



.predictions-page .geo-map-sub {
    color: #9cb0cb;
    font-size: 0.95rem;
}



.predictions-page .geo-heat-hint {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.35rem;
}



    .predictions-page .geo-heat-hint .heat {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        opacity: 0.8;
    }



    .predictions-page .geo-heat-hint .red {
        background: #ff5c5c;
    }

    .predictions-page .geo-heat-hint .yellow {
        background: #facc15;
    }

    .predictions-page .geo-heat-hint .green {
        background: #22c55e;
    }



.predictions-page .geo-regions {
    background: #0f2235;
    border: 1px solid #1a3048;
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}



.predictions-page .geo-regions-title {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #9cb0cb;
    font-size: 0.9rem;
}



.predictions-page .geo-region-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}



.predictions-page .geo-region-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0c1b2c;
    border: 1px solid #1c324a;
    border-radius: 10px;
    padding: 0.8rem 0.9rem;
    gap: 0.75rem;
}



.predictions-page .geo-region-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}



.predictions-page .geo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}



    .predictions-page .geo-dot.dot-high {
        background: #f87171;
    }

    .predictions-page .geo-dot.dot-medium {
        background: #facc15;
    }

    .predictions-page .geo-dot.dot-low {
        background: #22c55e;
    }



.predictions-page .geo-region-name {
    font-weight: 700;
    color: #e9f3ff;
}



.predictions-page .geo-region-loc {
    color: #9cb0cb;
    font-size: 0.9rem;
}



.predictions-page .geo-region-value {
    text-align: right;
}



.predictions-page .geo-region-orders {
    font-weight: 800;
    color: #e9f3ff;
    font-size: 1.1rem;
}



.predictions-page .geo-region-meta {
    color: #9cb0cb;
    font-size: 0.9rem;
}



.predictions-page .geo-legend {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    color: #9cb0cb;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}



.predictions-page .legend-title {
    color: #c7d9f5;
    font-weight: 700;
}



.predictions-page .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}



.predictions-page .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}



    .predictions-page .legend-dot.high {
        background: #f87171;
    }

    .predictions-page .legend-dot.medium {
        background: #facc15;
    }

    .predictions-page .legend-dot.low {
        background: #22c55e;
    }



.predictions-page .adjustments-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



.predictions-page .adjustments-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}



.predictions-page .adjust-card {
    background: #0f2235;
    border: 1px solid #1c324a;
    border-radius: 14px;
    padding: 1rem;
}



.predictions-page .adjust-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}



.predictions-page .adjust-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #e9f3ff;
}



.predictions-page .adjust-sub {
    color: #9cb0cb;
    font-size: 0.95rem;
    margin-top: 0.15rem;
}



.predictions-page .ghost-button {
    background: transparent;
    border: 1px solid #2d4c70;
    color: #d4e4ff;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.2) !important;
}



.predictions-page .adjust-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}



.predictions-page .adjust-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0c1b2c;
    border: 1px solid #1c324a;
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    gap: 0.6rem;
}



.predictions-page .adjust-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}



.predictions-page .adjust-pill {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    text-transform: lowercase;
    font-weight: 700;
    color: white;
    font-size: 0.82rem;
}



    .predictions-page .adjust-pill.promotion {
        background: #16a34a;
    }

    .predictions-page .adjust-pill.holiday {
        background: #4b5563;
    }



.predictions-page .adjust-name {
    color: #e9f3ff;
    font-weight: 700;
}



.predictions-page .adjust-week {
    color: #9cb0cb;
    font-size: 0.9rem;
}



.predictions-page .adjust-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}



.predictions-page .adjust-impact {
    font-weight: 800;
    font-size: 0.95rem;
}



    .predictions-page .adjust-impact.pos {
        color: #4ade80;
    }

    .predictions-page .adjust-impact.neg {
        color: #f87171;
    }



.predictions-page .adjust-remove {
    color: #f87171;
    cursor: pointer;
    font-weight: 700;
}



.predictions-page .empty-state {
    min-height: 180px;
    border: 1px dashed #2d4c70;
    border-radius: 10px;
    color: #9cb0cb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.01);
}



.predictions-page .empty-icon {
    font-size: 2rem;
    opacity: 0.7;
}



.predictions-page .empty-text {
    font-weight: 600;
    color: #b9c9e2;
}



.predictions-page .counts-card {
    margin-top: 0.2rem;
}



.predictions-page .adjust-info {
    background: #0f2d1f;
    border: 1px solid #16402d;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}



.predictions-page .info-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #16a34a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}



.predictions-page .info-title {
    font-weight: 800;
    color: #d9f3e5;
    margin-bottom: 0.15rem;
}



.predictions-page .info-text {
    color: #b4d4c2;
    line-height: 1.45;
}

.predictions-page .table-card {
    padding: 1.1rem;
}



.predictions-page table.forecast-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.85rem;
}



    .predictions-page table.forecast-table thead th {
        text-align: left;
        font-weight: 700;
        color: #9cb0cb;
        padding: 0.55rem 0.4rem;
        border-bottom: 1px solid #1f3650;
        font-size: 0.9rem;
    }



    .predictions-page table.forecast-table tbody td {
        padding: 0.65rem 0.4rem;
        border-bottom: 1px solid #15263a;
        color: #dbe9ff;
        font-size: 0.95rem;
    }



    .predictions-page table.forecast-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.02);
    }



.predictions-page .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}



.predictions-page .status-accurate {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}



.predictions-page .status-review {
    background: rgba(248, 180, 0, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(248, 180, 0, 0.35);
}



.predictions-page .variance-positive {
    color: #4ade80;
    font-weight: 700;
}



.predictions-page .variance-negative {
    color: #f87171;
    font-weight: 700;
}



.predictions-page .orders-dual {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}



.predictions-page .orders-muted {
    color: #9cb0cb;
    font-size: 0.9rem;
}



.predictions-page .note-text {
    color: #7587a5;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}



.predictions-page .rz-chart {
    background: transparent;
}



    .predictions-page .rz-chart g text {
        fill: #9cb0cb;
    }



.predictions-page .rz-legend-item text {
    fill: #c7d9f5;
}



.predictions-page .rz-chart svg {
    border-radius: 10px;
    background: #0f2235;
}



.predictions-page .table-note {
    color: #92a7c7;
    font-size: 0.9rem;
    margin-top: 0.45rem;
}



.predictions-page .badge-future {
    color: #7dd3fc;
    font-weight: 700;
}



.predictions-page .section-title {
    font-weight: 700;
    color: #e9f3ff;
    font-size: 1rem;
}



.predictions-page .section-sub {
    color: #9cb0cb;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}


@media (max-width: 960px) {

    .predictions-page {
        padding: 1rem;
    }



        .predictions-page .page-header {
            flex-direction: column;
            align-items: flex-start;
        }



        .predictions-page .chart-header {
            flex-direction: column;
            align-items: flex-start;
        }



        .predictions-page .chart-toolbar {
            width: 100%;
            justify-content: flex-start;
        }



        .predictions-page .geo-body {
            grid-template-columns: 1fr;
        }

        .predictions-page .adjustments-grid {
            grid-template-columns: 1fr;
        }
}

.predictions-page table.forecast-table tbody td.clickable:hover {
    text-shadow: 1px 1px 4px #ccc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.predictions-page table.forecast-table tbody td.clickable {
    color: hsl(142 70% 49%);
    cursor: pointer;
}


/* Customer Predictions Modal */
.predictions-page .cp-modal-container, .predictions-page .be-modal-container {
    max-width: 100vw;
    max-height: 100vh;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
}

.predictions-page .cp-modal {
    padding: 1.2rem;
    background: #0f2235;
    border: 1px solid #1c324a;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    position: fixed;
    justify-self: anchor-center;
    max-height: 80vh;
    overflow-y: auto;
    min-width: 65vw;
}

    .predictions-page .cp-modal::-webkit-scrollbar-track {
        margin: 10px 0;
    }

.predictions-page .cp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.predictions-page .cp-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #e9f3ff;
}

.predictions-page .cp-sub {
    color: #9cb0cb;
    margin-top: 0.15rem;
    font-size: 0.96rem;
}

.predictions-page .cp-actions {
    flex-shrink: 0;
}

.predictions-page .cp-close {
    background: transparent;
    border: 1px solid #2d4c70;
    color: #d4e4ff;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.predictions-page .cp-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.predictions-page .cp-card {
    background: #0c1b2c;
    border: 1px solid #1c324a;
    border-radius: 12px;
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.predictions-page .cp-card-title {
    font-weight: 800;
    color: #e9f3ff;
    font-size: 1.05rem;
}

.predictions-page .cp-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.predictions-page .cp-metric {
    background: #0f2235;
    border: 1px solid #1c324a;
    border-radius: 10px;
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.predictions-page .cp-metric-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #e9f3ff;
    font-weight: 700;
}

.predictions-page .cp-metric-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #142c45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ecbff;
}

.predictions-page .cp-metric-label {
    color: #e9f3ff;
}

.predictions-page .cp-metric-base {
    color: #9cb0cb;
    font-size: 0.92rem;
}

.predictions-page .cp-metric-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

    .predictions-page .cp-metric-inputs .rz-numeric {
        width: 100%;
    }

    .predictions-page .cp-metric-inputs .rz-inputtext {
        background: #0c1b2c;
        border: 1px solid #2d4c70;
        color: #e9f3ff;
    }

.predictions-page .cp-footer {
    display: flex;
    justify-content: flex-end;
}

.predictions-page .cp-done {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border: 1px solid #20b759;
    color: #eafff5;
    font-weight: 700;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
}

    .predictions-page .cp-done:hover {
        filter: brightness(1.05);
    }

@media (max-width: 768px) {
    .predictions-page .cp-metrics {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

.predictions-page .cp-metric-inputs .rz-spinner {
    border: unset;
    background: unset;
    border-radius: 8px;
}

.predictions-page .cp-metric-inputs .rz-inputtext {
    border-radius: 8px;
}

.predictions-page .cp-metric-inputs .rz-spinner:not(:disabled):not(.rz-state-disabled):focus, .predictions-page .cp-metric-inputs .rz-spinner:not(:disabled):not(.rz-state-disabled):hover {
    border-radius: 8px !important;
    border-color: hsl(142 70% 49%);
}

/* bussiness event modal */

.predictions-page .be-modal {
    padding: 1.2rem;
    background: #0f2235;
    border: 1px solid #1c324a;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: fixed;
    justify-self: anchor-center;
    max-height: 80vh;
    overflow-y: auto;
    min-width: 45vw;
    min-width: 450px;
}

    .predictions-page .be-modal .rz-textbox, .predictions-page .be-modal .rz-dropdown, .predictions-page .rz-spinner, .predictions-page .rz-spinner input[type='number'], .predictions-page .rz-spinner input[type='text'] {
        background-color: transparent !important;
        border-radius: 8px !important;
        border: 1px solid #2d4c70;
        color: #fff;
        font-size: 13px !important;
    }

    .predictions-page .be-modal .norma--radzen-custom-dp .rz-multiselect-label-container, .predictions-page .be-modal .rz-dropdown-label {
        color: #fff !important;
        margin-top: 2px;
        margin-inline-start: 2px;
    }

    .predictions-page .be-modal .rz-textbox:not(:disabled):not(.rz-state-disabled):focus, .predictions-page .be-modal .rz-textbox:not(:disabled):not(.rz-state-disabled):hover,
    .predictions-page .be-modal .rz-dropdown:focus-within, .predictions-page .be-modal .rz-dropdown.keyboard-focus, .predictions-page .be-modal .rz-dropdown:hover,
    .predictions-page .be-modal .rz-spinner input[type='number']:focus-within, .predictions-page .be-modal .rz-spinner input[type='text']:focus, .predictions-page .be-modal .rz-spinner input[type='text']:hover {
        border-radius: 8px !important;
        border-color: hsl(142 70% 49%);
        outline: unset !important;
    }

.predictions-page .rz-spinner {
    border: unset !important;
}

    .predictions-page .rz-spinner .rz-spinner-down {
        width: 13px;
        height: 13px;
        inset-inline-end: 5px;
        inset-block-end: 3px;
    }

    .predictions-page .rz-spinner .rz-spinner-up {
        width: 13px;
        height: 13px;
        inset-inline-end: 5px;
        inset-block-start: 3px;
    }

.predictions-page .rz-button.rz-primary.rz-shade-default, .predictions-page .rz-primary.rz-shade-default.rz-paginator-element,
.predictions-page .rz-button:not(.rz-state-disabled):hover:not(:active), .predictions-page .rz-paginator-element:not(.rz-state-disabled):hover:not(:active) {
    background-color: unset;
}

.predictions-page .be-header {
    position: relative;
    padding-right: 2rem;
}

.predictions-page .be-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #e9f3ff;
}

.predictions-page .be-sub {
    color: #9cb0cb;
    margin-top: 0.25rem;
    font-size: 0.96rem;
    line-height: 1.4;
}

.predictions-page .be-close {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: 1px solid #2d4c70;
    color: #d4e4ff;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.predictions-page .be-form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.predictions-page .be-field label {
    display: block;
    margin-bottom: 0.35rem;
    color: #c7d9f5;
    font-weight: 700;
}

.predictions-page .be-field .rz-dropdown,
.predictions-page .be-field .rz-inputtext,
.predictions-page .be-field .rz-numeric {
    width: 100%;
}

.predictions-page .be-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.predictions-page .be-cancel {
    background: #112840;
    border: 1px solid #2d4c70;
    color: #d4e4ff;
    border-radius: 10px;
    padding: 0.6rem 1rem;
}

.predictions-page .be-submit {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border: 1px solid #20b759;
    color: #eafff5;
    font-weight: 700;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
}

    .predictions-page .be-submit:hover {
        filter: brightness(1.05);
    }

.chart-tooltip {
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    animation: tooltipFadeUp 160ms ease-out;
    transform-origin: bottom center;
}

@keyframes tooltipFadeUp {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

rz-chart polyline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 700ms ease-out forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

rz-chart circle {
    animation: popIn 300ms ease-out;
}

@keyframes popIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

rz-chart polyline:hover {
    filter: drop-shadow(0 0 6px rgba(0, 123, 255, 0.6));
}

/*.predictions-page .rz-axis.rz-category-axis g.rz-tick:first-of-type {
    display: none;
}*/

.series-tooltip {
    position: fixed;
    background: linear-gradient(135deg, #1a1f35 0%, #0d1117 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 240px;
}

    .series-tooltip.visible {
        opacity: 1;
    }

    .series-tooltip .tooltip-week {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
    }

    .series-tooltip .tooltip-row {
        padding: 4px 0;
        font-size: 14px;
    }

        .series-tooltip .tooltip-row.confidence {
            color: #00bcd4;
        }

        .series-tooltip .tooltip-row.predicted {
            color: #4f8df5;
        }

        .series-tooltip .tooltip-row.adjusted {
            color: #9a7bff;
        }

        .series-tooltip .tooltip-row.actual {
            color: #38ef7d;
        }


.card-panel.chart-card {
    position: relative;
}

.today-label {
    position: absolute;
    top: 5.7rem;
    z-index: 5;
    /*    transform: translateX(-40%);*/
    font-size: 12px;
    color: #cbd5e1;
    pointer-events: none;
    white-space: nowrap;
    /*    padding-inline-start: 5.2rem;*/
    font-size: 14px;
    color: #ef4444;
}
/*
@media screen and (min-width: 3300px) {
    .today-label {
        transform: translateX(210%);
    }
}

@media screen and (min-width: 3100px) and (max-width: 3300px) {
    .today-label {
        transform: translateX(200%);
    }
}

@media screen and (min-width: 2900px) and (max-width: 3100px) {
    .today-label {
        transform: translateX(190%);
    }
}

@media screen and (min-width: 2700px) and (max-width: 2900px) {
    .today-label {
        transform: translateX(180%);
    }
}

@media screen and (min-width: 2500px) and (max-width: 2700px) {
    .today-label {
        transform: translateX(170%);
    }
}

@media screen and (min-width: 2300px) and (max-width: 2500px) {
    .today-label {
        transform: translateX(160%);
    }
}

@media screen and (min-width: 2100px) and (max-width: 2300px) {
    .today-label {
        transform: translateX(150%);
    }
}

@media screen and (min-width: 1900px) and (max-width: 2100px) {
    .today-label {
        transform: translateX(140%);
    }
}

@media screen and (min-width: 1700px) and (max-width: 1900px) {
    .today-label {
        transform: translateX(130%);
    }
}

@media screen and (min-width: 1550px) and (max-width: 1700px) {
    .today-label {
        transform: translateX(110%);
    }
}

@media screen and (min-width: 1400px) and (max-width: 1550px) {
    .today-label {
        transform: translateX(95%);
    }
}

@media screen and (min-width: 1300px) and (max-width: 1400px) {
    .today-label {
        transform: translateX(75%);
    }
}

@media screen and (min-width: 1200px) and (max-width: 1300px) {
    .today-label {
        transform: translateX(65%);
    }
}

@media screen and (min-width: 1100px) and (max-width: 1200px) {
    .today-label {
        transform: translateX(50%);
    }
}

@media screen and (min-width: 1000px) and (max-width: 1100px) {
    .today-label {
        transform: translateX(35%);
    }
}

@media screen and (min-width: 960px) and (max-width: 1000px) {
    .today-label {
        transform: translateX(20%);
    }
}

@media screen and (min-width: 870px) and (max-width: 960px) {
    .today-label {
        transform: translateX(18%);
        top: 9rem;
    }
}

@media screen and (min-width: 770px) and (max-width: 870px) {
    .today-label {
        transform: translateX(10%);
        top: 9rem;
    }
}

@media screen and (max-width: 770px) {
    .today-label {
        transform: translateX(0%);
        top: 9rem;
    }
}*/