/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
:root {
    --fire-color: #ff0000;
    --medical-color: #0288D1;
    --hazmat-color: #e99b35;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.app-shell {
    min-height: 100vh;
    padding-bottom: 1rem;
}

.page-title {
    margin: 0.75rem 0;
    text-align: center;
}

.map-panel {
    width: 100%;
    height: min(72vh, 52rem);
    min-height: 24rem;
    border-radius: 0.5rem;
}

.incident-table-panel {
    margin-top: 0.5rem;
}

.incident-table-toggle {
    color: #6c757d;
    cursor: pointer;
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
}

.incident-table-toggle-hint {
    color: #6c757d;
}

.incident-table-wrapper {
    max-height: clamp(16rem, 34vh, 30rem);
    background-color: #fff;
    border-radius: 0.5rem;
    overflow: auto;
}

.incident-table {
    margin-bottom: 0;
}

.incident-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f8f9fa;
}

.incident-row-fire {
    border-left: 4px solid #dc3545;
}

.incident-row-medical {
    border-left: 4px solid #0d6efd;
}

.incident-row-other {
    border-left: 4px solid #6c757d;
}

.incident-badge {
    font-weight: 600;
}

.incident-badge-fire {
    background-color: #dc3545;
}

.incident-badge-medical {
    background-color: #0d6efd;
}

.incident-badge-other {
    background-color: #6c757d;
}

.incident-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.incident-chip {
    border-radius: 1rem;
    color: #fff;
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.25rem 0.65rem;
}

.incident-chip-fire {
    background-color: #dc3545;
}

.incident-chip-medical {
    background-color: #0d6efd;
}

.incident-chip-other {
    background-color: #6c757d;
}

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
    width: 100%;
}

@media (min-width: 1200px) {
    .map-panel {
        height: min(74vh, 56rem);
    }

    .incident-table-wrapper {
        max-height: clamp(18rem, 28vh, 24rem);
    }
}

@media (max-width: 767.98px) {
    .incident-table-wrapper {
        max-height: none;
        overflow: visible;
    }

    .incident-table thead {
        display: none;
    }

    .incident-table,
    .incident-table tbody,
    .incident-table tr,
    .incident-table td {
        display: block;
        width: 100%;
    }

    .incident-table tr {
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .incident-table td {
        border: 0;
        border-bottom: 1px solid #f1f3f5;
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
        padding: 0.45rem 0;
        text-align: right;
    }

    .incident-table td:last-child {
        border-bottom: 0;
    }

    .incident-table td::before {
        color: #495057;
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
    }
}

/*
 * Property styles in unhighlighted state.
 */
.incident {
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 50%;
    color: #263238;
    display: flex;
    font-size: 14px;
    gap: 15px;
    height: 30px;
    justify-content: center;
    padding: 4px;
    position: relative;
    position: relative;
    transition: all 0.3s ease-out;
    width: 30px;
}

.incident::after {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #FFFFFF;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    top: 95%;
    transform: translate(-50%, 0);
    transition: all 0.3s ease-out;
    width: 0;
    z-index: 1;
}

.incident .icon {
    align-items: center;
    display: flex;
    justify-content: center;
    color: #FFFFFF;
}

.incident .icon svg {
    height: 20px;
    width: auto;
}

.incident .details {
    display: none;
    flex-direction: column;
    flex: 1;
}

.incident .address {
    color: #9E9E9E;
    font-size: 10px;
    margin-bottom: 10px;
    margin-top: 5px;
}

.incident .features {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.incident .features > div {
    align-items: center;
    background: #F5F5F5;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    font-size: 10px;
    gap: 5px;
    padding: 5px;
}

/*
 * Property styles in highlighted state.
 */
.incident.highlight {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
    height: 80px;
    padding: 8px 15px;
    width: auto;
}

.incident.highlight::after {
    border-top: 9px solid #FFFFFF;
}

.incident.highlight .details {
    display: flex;
}

.incident.highlight .icon svg {
    width: 50px;
    height: 50px;
}

/*
 * Fire icon colors.
 */
.incident.highlight:has(.fa-house-fire) .icon {
    color: var(--fire-color);
}

.incident:not(.highlight):has(.fa-house-fire) {
    background-color: var(--fire-color);
}

.incident:not(.highlight):has(.fa-house-fire)::after {
    border-top: 9px solid var(--fire-color);
}

/*
 * Medical icon colors.
 */
.incident.highlight:has(.fa-truck-medical) .icon {
    color: var(--medical-color);
}

.incident:not(.highlight):has(.fa-truck-medical) {
    background-color: var(--medical-color);
}

.incident:not(.highlight):has(.fa-truck-medical)::after {
    border-top: 9px solid var(--medical-color);
}

/*
 * Hazmat icon colors.
 */
.incident.highlight:has(.fa-biohazard) .icon {
    color: var(--hazmat-color);
}

.incident:not(.highlight):has(.fa-biohazard) {
    background-color: var(--hazmat-color);
}

.incident:not(.highlight):has(.fa-biohazard)::after {
    border-top: 9px solid var(--hazmat-color);
}
/*
 * Train icon colors.
 */
.incident.highlight:has(.fa-train) .icon {
    color: var(--fire-color);
}

.incident:not(.highlight):has(.fa-train) {
    background-color: var(--fire-color);
}

.incident:not(.highlight):has(.fa-train)::after {
    border-top: 9px solid var(--fire-color);
}
/*
 * Airplane icon colors.
 */
.incident.highlight:has(.fa-plane) .icon {
    color: var(--fire-color);
}

.incident:not(.highlight):has(.fa-plane) {
    background-color: var(--fire-color);
}

.incident:not(.highlight):has(.fa-plane)::after {
    border-top: 9px solid var(--fire-color);
}
/*
 * Rescue icon colors.
 */
.incident.highlight:has(.fa-helmet-safety) .icon {
    color: var(--fire-color);
}

.incident:not(.highlight):has(.fa-helmet-safety) {
    background-color: var(--fire-color);
}

.incident:not(.highlight):has(.fa-helmet-safety)::after {
    border-top: 9px solid var(--fire-color);
}