/* ========== */
/* Onboarding */
/* ========== */
.onboarding-intro {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 1112px 672px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
}

    .onboarding-intro .card-intro {
        width: 700px;
        border: 3px solid var(--ps-outline);
        border-radius: var(--ps-2xl);
        padding: 2rem;
        backdrop-filter: blur(15px) brightness(40%);
        -webkit-backdrop-filter: blur(15px) brightness(40%); /* Safari */
    }

        .onboarding-intro .card-intro .step {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 4.5rem;
        }

        .onboarding-intro .card-intro .step-circle {
            width: 52px;
            height: 52px;
            color: var(--ps-surface);
            background-color: var(--ps-on-surface-variant);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
            font-size: var(--ps-body-md);
        }

        .onboarding-intro .card-intro .step svg path {
            stroke: var(--ps-on-surface-variant);
            fill: var(--ps-on-surface-variant);
        }

.stepper-indicator {
    width: 60px;
    height: 8px;
    background-color: var(--ps-on-surface-variant-2);
    border-radius: var(--ps-2xs);
}

    .stepper-indicator.active {
        background-color: var(--ps-on-surface-variant);
    }

.table-no-bg th,
.table-no-bg td,
.table-no-bg tr,
.table-no-bg thead,
.table-no-bg tbody {
    color: var(--ps-on-surface);
    background-color: inherit;
    padding: 1rem;
}

/* ========== */
/* End of onboarding */
/* ========== */

/* ========== */
/* Home */
/* ========== */
.grid-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    position: relative;
}

.ai-installation-card {
    padding: var(--ps-sm);
    background-color: var(--ps-surface-container);
    border: 2px solid var(--ps-surface-container);
    border-radius: var(--ps-sm);
    cursor: pointer;
    color: var(--ps-on-surface);
}

    .ai-installation-card.selected {
        border: 2px solid var(--ps-outline);
        background-color: var(--ps-card-selected);
    }

    .ai-installation-card .installation-description {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ai-installation-card .ai-thumb-container {
        position: relative;
        width: 100%;
        height: 205px;
    }

        .ai-installation-card .ai-thumb-container .installation-info {
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 36px;
            background-color: rgba(0,0,0, 0.5);
        }
/* ========== */
/* End of home */
/* ========== */

/* ========== */
/* Insights dashboard */
/* ========== */
.insights-date-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background-color: var(--ps-surface-container);
    border-radius: var(--ps-xs);
    cursor: pointer;
    padding: 8px 12px;
    height: var(--ps-btn-icon-height);
}

    .insights-date-filter:hover {
        background-color: var(--ps-surface-container-hover);
    }

.gauge-track {
    position: relative;
    height: 24px;
    border-radius: 8px;
    background: linear-gradient(90deg,#FFE042 0%, #00B245 100%);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}

.gauge-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    width: 20px;
    height: 30px;
    border-radius: 0.5rem;
    border: 0.3em solid white;
}

.tick-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.tick-between {
    display: flex;
    justify-content: center;
}

    .tick-between::before {
        content: "";
        width: 3px;
        height: 6px;
        background-color: #1F2C42;
        border-radius: 1px;
    }

.tick-0 {
    color: #FCDF43;
}

.tick-20:before {
    background-color: #BFD443 !important;
}

.tick-40:before {
    background-color: #83CA44 !important;
}

.tick-60:before {
    background-color: #83CA44 !important;
}

.tick-80:before {
    background-color: #83CA44 !important;
}

.tick-100 {
    color: #07B445;
}

.edge-label {
    font-size: .9rem;
    color: #9ca3af; /* text-slate-400 */
}

/* value + badge line */
.value-line .value {
    font-weight: 700;
    font-size: 24px;
    color: #78ff93; /* nice pop over dark */
    line-height: 1;
}

.delta-badge {
    background: var(--ps-surface-container-low);
    color: var(--ps-on-surface);
    padding: 0.2rem 0.4rem 0.2rem 0rem;
    border-radius: var(--ps-2xs);
    font-size: var(--ps-label-md);
    display: inline-flex;
    align-items: center;
}

    .delta-badge .direction-icon.down svg path {
        stroke: #FF3E2D;
    }

    .delta-badge .direction-icon.up {
        transform: rotate(180deg);
    }

        .delta-badge .direction-icon.up svg path {
            stroke: #48BF44;
        }

/* Modal preview photo */
.modal-view-photo {
}

    .modal-view-photo .modal-content {
        background-color: inherit;
        border: none;
    }

    .modal-view-photo .modal-body {
        padding: 0;
    }

    .modal-view-photo .modal-footer {
        display: block;
        padding: 0.6rem 0 0 0;
        ;
        border: none;
    }

.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(var(--ps-blur));
    -webkit-backdrop-filter: blur(var(--ps-blur));
    opacity: 1 !important;
}
/* End modal preview photo */

.grid-violation-photo-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
    gap: 0.1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.violation-card {
    max-width: 222px;
}

.violation-photo {
    position: relative;
}

    .violation-photo .preview-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

        .violation-photo .preview-overlay span {
            transform: scale(0.8);
            opacity: 0;
            transition: transform 0.4s ease, opacity 0.4s ease;
        }

    .violation-photo:hover .preview-overlay {
        opacity: 1;
    }

        .violation-photo:hover .preview-overlay span {
            transform: scale(1);
            opacity: 1;
        }
/* ========== */
/* End of insights dashboard */
/* ========== */
.ps-photo-info {
    height: 40px;
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 0 var(--ps-sm);
    background-color: rgba(0, 0, 0, 0.5);
    border-top-left-radius: var(--ps-xs);
    border-top-right-radius: var(--ps-xs);
}

.ps-chart-tooltip {
    padding: var(--ps-2xs);
    border: 1px solid var(--ps-outline-variant);
    border-radius: var(--ps-xs);
    background-color: #1F2C421F;
    backdrop-filter: blur(var(--ps-blur));
    -webkit-backdrop-filter: blur(var(--ps-blur));
    font-size: var(--ps-label-md);
}