.vehicle-report-view {
    --vr-primary: #0d6efd;
    --vr-border: #e9ecef;
    --vr-soft: #f8f9fa;
    --vr-text: #495057;
    --vr-heading: #212529;
    --vr-radius: 1rem;
    --vr-input-radius: .75rem;
    --vr-shadow: 0 .125rem .35rem rgba(0, 0, 0, .06);
}

    .vehicle-report-view *,
    .vehicle-report-view *::before,
    .vehicle-report-view *::after {
        box-sizing: border-box;
    }

    .vehicle-report-view .report-form {
        max-width: 1400px;
        margin: 0 auto;
    }

    .vehicle-report-view .card {
        border-radius: var(--vr-radius);
        box-shadow: var(--vr-shadow);
        overflow: hidden;
    }

        .vehicle-report-view .report-header .card-body,
        .vehicle-report-view .card .card-body {
            background: #fff;
            border-radius: var(--vr-radius);
        }

    .vehicle-report-view .intro-box {
        background: linear-gradient(135deg, #f8f9fa, #eef4ff);
        border: 1px solid var(--vr-border);
        border-radius: .9rem;
        padding: 1.15rem 1.3rem;
        min-height: 100%;
    }

    .vehicle-report-view .eyebrow {
        display: inline-block;
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--vr-primary);
        margin-bottom: .6rem;
    }

    .vehicle-report-view .form-panel {
        background: #fff;
        border: 1px solid var(--vr-border);
        border-radius: .9rem;
        padding: 1.15rem 1.25rem;
        min-height: 100%;
    }

    .vehicle-report-view .section-title {
        font-size: 1.35rem;
        font-weight: 700;
        margin-bottom: .3rem;
        color: var(--vr-heading);
        line-height: 1.3;
    }

    .vehicle-report-view .section-subtitle {
        color: #6c757d;
        font-size: .95rem;
        line-height: 1.45;
    }

    .vehicle-report-view .panel-title {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: .85rem;
        color: var(--vr-heading);
        line-height: 1.35;
    }

    .vehicle-report-view label {
        display: inline-block;
        font-weight: 600;
        font-size: .95rem;
        color: var(--vr-heading);
        margin-bottom: .35rem;
        line-height: 1.35;
    }

    .vehicle-report-view .form-control,
    .vehicle-report-view textarea,
    .vehicle-report-view select {
        width: 100%;
        min-width: 0;
        border-radius: var(--vr-input-radius);
        border: 1px solid #d7dce1;
        padding: .75rem .9rem;
        box-shadow: none;
        font-size: .95rem;
        line-height: 1.4;
        background-color: #fff;
    }

        .vehicle-report-view .form-control::placeholder,
        .vehicle-report-view textarea::placeholder {
            color: #8a9198;
        }

        .vehicle-report-view .form-control:focus,
        .vehicle-report-view textarea:focus,
        .vehicle-report-view select:focus {
            border-color: rgba(13, 110, 253, .45);
            box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .12);
        }

        .vehicle-report-view textarea.form-control {
            resize: vertical;
            min-height: 110px;
        }

    .vehicle-report-view .choice-group {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem .7rem;
        align-items: center;
    }

        .vehicle-report-view .choice-group.compact {
            gap: .2rem .5rem;
        }

    .vehicle-report-view .form-check-inline {
        margin-right: .25rem;
    }

    .vehicle-report-view .form-check {
        margin-bottom: 0;
        padding-left: 1.35rem;
        min-height: auto;
    }

    .vehicle-report-view .form-check-input {
        margin-top: .2rem;
        cursor: pointer;
    }

    .vehicle-report-view .form-check-label {
        font-weight: 500;
        color: var(--vr-heading);
        margin-bottom: 0;
        cursor: pointer;
        line-height: 1.35;
    }

    .vehicle-report-view .section-divider {
        margin: 1.4rem 0;
        border-color: #eceff3;
        opacity: 1;
    }

    .vehicle-report-view .travel-row {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem 1rem;
        align-items: flex-start;
    }

    .vehicle-report-view .travel-label {
        min-width: 230px;
        font-weight: 600;
        line-height: 1.4;
        padding-top: .15rem;
    }

    .vehicle-report-view .speed-row {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

        .vehicle-report-view .speed-row label {
            margin-bottom: 0;
            white-space: nowrap;
        }

    .vehicle-report-view .speed-input {
        width: 110px;
        max-width: 100%;
    }

    .vehicle-report-view .submit-bar .card-body {
        padding: 1rem;
    }

    .vehicle-report-view .submit-bar .btn {
        border-radius: .85rem;
        font-weight: 700;
        letter-spacing: .01em;
        min-height: 52px;
        font-size: 1rem;
    }

    .vehicle-report-view .text-danger.small {
        display: block;
        margin-top: .3rem;
        line-height: 1.35;
    }

    .vehicle-report-view .instruction-list {
        margin: 0;
        padding-left: 1.25rem;
    }

        .vehicle-report-view .instruction-list li {
            margin-bottom: .7rem;
            line-height: 1.5;
            color: var(--vr-heading);
        }

            .vehicle-report-view .instruction-list li:last-child {
                margin-bottom: 0;
            }

    .vehicle-report-view .instruction-note {
        margin-top: .25rem;
        font-size: .92rem;
        color: #6c757d;
        line-height: 1.45;
    }

    .vehicle-report-view .repeat-block + .repeat-block {
        margin-top: 1rem;
    }

.repeat-block.d-none {
    display: none !important;
}

/* diagram */
.vehicle-report-view .diagram-wrap {
    border: 1px solid #d7dce1;
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
    width: 100%;
}

.vehicle-report-view #diagramCanvas {
    display: block;
    width: 100%;
    height: 400px;
    max-width: 100%;
    touch-action: none;
    background-image: url('/images/accident-diagram-template.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.vehicle-report-view .diagram-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* make buttons more touch-friendly */
.vehicle-report-view .btn-sm {
    min-height: 38px;
    padding: .45rem .85rem;
}

.vehicle-report-view .btn-lg {
    padding: .9rem 1rem;
}

/* prevent long content from breaking layout */
.vehicle-report-view input,
.vehicle-report-view textarea,
.vehicle-report-view select,
.vehicle-report-view .btn,
.vehicle-report-view .form-check-label,
.vehicle-report-view label,
.vehicle-report-view .section-title,
.vehicle-report-view .panel-title,
.vehicle-report-view .travel-label {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* large desktop */
@media (min-width: 1400px) {
    .vehicle-report-view .report-form {
        max-width: 1480px;
    }

    .vehicle-report-view .card .card-body,
    .vehicle-report-view .report-header .card-body {
        padding: 1.75rem !important;
    }
}

/* laptops / medium desktop */
@media (max-width: 1199.98px) {
    .vehicle-report-view .section-title {
        font-size: 1.28rem;
    }

    .vehicle-report-view .travel-label {
        min-width: 200px;
    }

    .vehicle-report-view #diagramCanvas {
        height: 360px;
    }
}

/* tablet and below */
@media (max-width: 991.98px) {
    .vehicle-report-view .report-form {
        max-width: 100%;
    }

    .vehicle-report-view .intro-box,
    .vehicle-report-view .form-panel {
        padding: 1rem;
    }

    .vehicle-report-view .card .card-body,
    .vehicle-report-view .report-header .card-body {
        padding: 1.15rem !important;
    }

    .vehicle-report-view .section-title {
        font-size: 1.22rem;
    }

    .vehicle-report-view .panel-title {
        font-size: 1rem;
    }

    .vehicle-report-view .travel-row {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }

    .vehicle-report-view .travel-label {
        min-width: 100%;
        width: 100%;
        padding-top: 0;
    }

    .vehicle-report-view .speed-row {
        flex-wrap: wrap;
    }

    .vehicle-report-view #diagramCanvas {
        height: 320px;
    }
}

/* small tablets / large phones */
@media (max-width: 767.98px) {
    .vehicle-report-view .container {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .vehicle-report-view .card {
        border-radius: .9rem;
    }

        .vehicle-report-view .card .card-body,
        .vehicle-report-view .report-header .card-body {
            padding: 1rem !important;
        }

    .vehicle-report-view .intro-box,
    .vehicle-report-view .form-panel {
        padding: .95rem;
    }

    .vehicle-report-view .section-title {
        font-size: 1.15rem;
    }

    .vehicle-report-view .section-subtitle,
    .vehicle-report-view .instruction-note,
    .vehicle-report-view .form-control,
    .vehicle-report-view textarea,
    .vehicle-report-view select {
        font-size: .93rem;
    }

    .vehicle-report-view .choice-group {
        gap: .35rem .6rem;
        align-items: flex-start;
    }

    .vehicle-report-view .form-check-inline {
        display: inline-flex;
        align-items: flex-start;
        margin-right: .1rem;
    }

    .vehicle-report-view .speed-row {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
    }

        .vehicle-report-view .speed-row label {
            white-space: normal;
        }

    .vehicle-report-view .speed-input {
        width: 100%;
    }

    .vehicle-report-view #diagramCanvas {
        height: 280px;
    }

    .vehicle-report-view .submit-bar .card-body {
        padding: .85rem;
    }

    .vehicle-report-view .submit-bar .btn {
        min-height: 50px;
    }
}

/* phones */
@media (max-width: 575.98px) {
    .vehicle-report-view .container {
        padding-left: .7rem;
        padding-right: .7rem;
    }

    .vehicle-report-view .report-header {
        margin-bottom: 1rem !important;
    }

        .vehicle-report-view .card .card-body,
        .vehicle-report-view .report-header .card-body {
            padding: .9rem !important;
        }

    .vehicle-report-view .intro-box,
    .vehicle-report-view .form-panel {
        padding: .85rem;
        border-radius: .8rem;
    }

    .vehicle-report-view .eyebrow {
        font-size: .72rem;
    }

    .vehicle-report-view .section-title {
        font-size: 1.08rem;
    }

    .vehicle-report-view .panel-title {
        font-size: .98rem;
    }

    .vehicle-report-view label {
        font-size: .92rem;
    }

    .vehicle-report-view .form-control,
    .vehicle-report-view textarea,
    .vehicle-report-view select {
        padding: .68rem .8rem;
        font-size: .92rem;
    }

    .vehicle-report-view .choice-group {
        flex-direction: column;
        align-items: flex-start;
        gap: .45rem;
    }

        .vehicle-report-view .choice-group.compact {
            gap: .35rem;
        }

    .vehicle-report-view .form-check-inline,
    .vehicle-report-view .form-check {
        width: 100%;
    }

    .vehicle-report-view .section-divider {
        margin: 1.1rem 0;
    }

    .vehicle-report-view #diagramCanvas {
        height: 240px;
        background-size: cover;
    }

    .vehicle-report-view .diagram-actions {
        flex-direction: column;
    }

        .vehicle-report-view .diagram-actions .btn,
        .vehicle-report-view #clearDiagram {
            width: 100%;
        }

    .vehicle-report-view .submit-bar .btn {
        font-size: .98rem;
        min-height: 48px;
    }
}

/* very small phones */
@media (max-width: 399.98px) {
    .vehicle-report-view .container {
        padding-left: .55rem;
        padding-right: .55rem;
    }

    .vehicle-report-view .section-title {
        font-size: 1rem;
    }

    .vehicle-report-view .panel-title {
        font-size: .94rem;
    }

    .vehicle-report-view .form-control,
    .vehicle-report-view textarea,
    .vehicle-report-view select {
        font-size: .9rem;
    }

    .vehicle-report-view #diagramCanvas {
        height: 210px;
    }
}