/* Grid and other layout rules for STA dashboard apps */

.content
{
    padding-bottom: unset;
}

#map-container
{
    block-size: 100%;
    min-block-size: 18rem;
}

#summary-panel > .card-body
{
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat( auto-fit, minmax( 2rem, 1fr ) );
}

.summary-single-tile
{
    grid-column: auto / span 5;

    display: grid;
    grid-template-columns: 5fr 3fr 1fr;
    grid-template-areas: "name value trend";
}

.summary-single-tile .tile-name  { grid-area: name; }
.summary-single-tile .tile-value { grid-area: value; }
.summary-single-tile .tile-trend { grid-area: trend; }

.summary-multi-tile
{
    grid-column: auto / span 5;

    display: grid;
    grid-template-columns: 3fr 7fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.summary-multi-tile .tile-name          { grid-area: 1 / 1 / 4 / 2; }
.summary-multi-tile .tile-value.track-1 { grid-area: 1 / 2 / 2 / 3; }
.summary-multi-tile .tile-value.track-2 { grid-area: 2 / 2 / 3 / 3; }
.summary-multi-tile .tile-value.track-3 { grid-area: 3 / 2 / 4 / 3; }
.summary-multi-tile .tile-trend.track-1 { grid-area: 1 / 3 / 2 / 4; }
.summary-multi-tile .tile-trend.track-2 { grid-area: 2 / 3 / 3 / 4; }
.summary-multi-tile .tile-trend.track-3 { grid-area: 3 / 3 / 4 / 4; }

.wind-multi-tile
{
    grid-column: auto / span 4;

    display: grid;
    grid-template-columns: 2fr 2fr 5fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "arrow dir speed"
                         "arrow dir gust"
                         "arrow dir max";
    column-gap: 0.5rem;
}

.wind-multi-tile .tile-arrow { grid-area: arrow; }
.wind-multi-tile .tile-dir   { grid-area: dir; }
.wind-multi-tile .tile-speed { grid-area: speed; }
.wind-multi-tile .tile-gust  { grid-area: gust; }
.wind-multi-tile .tile-max   { grid-area: max; }

#column1 { order: 0; }
#column2 { order: 1; }

@media (min-width: 992px)
{
    #column1 { order: 1; }
    #column2 { order: 0; }

    .summary-single-tile
    {
        grid-column: auto / span 4;

        display: grid;
        grid-template-columns: 3fr 4fr;
        grid-template-areas: "name value"
                             "name trend";
    }

    .summary-single-tile .tile-name  { grid-area: name; }
    .summary-single-tile .tile-value { grid-area: value; }
    .summary-single-tile .tile-unit  { grid-area: unit; }
    .summary-single-tile .tile-trend { grid-area: trend; }

    .summary-multi-tile
    {
        grid-column: auto / span 5;

        display: grid;
        grid-template-columns: 3fr 7fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .summary-multi-tile .tile-name          { grid-area: 1 / 1 / 4 / 2; }
    .summary-multi-tile .tile-value.track-1 { grid-area: 1 / 2 / 2 / 3; }
    .summary-multi-tile .tile-value.track-2 { grid-area: 2 / 2 / 3 / 3; }
    .summary-multi-tile .tile-value.track-3 { grid-area: 3 / 2 / 4 / 3; }
    .summary-multi-tile .tile-trend.track-1 { grid-area: 1 / 3 / 2 / 4; }
    .summary-multi-tile .tile-trend.track-2 { grid-area: 2 / 3 / 3 / 4; }
    .summary-multi-tile .tile-trend.track-3 { grid-area: 3 / 3 / 4 / 4; }

    .wind-multi-tile
    {
        grid-column: auto / span 4;

        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas: "arrow speed"
                             "arrow gust"
                             "dir   max";
    }

    .wind-multi-tile .tile-arrow { grid-area: arrow; }
    .wind-multi-tile .tile-dir   { grid-area: dir; }
    .wind-multi-tile .tile-speed { grid-area: speed; }
    .wind-multi-tile .tile-gust  { grid-area: gust; }
    .wind-multi-tile .tile-max   { grid-area: max; }
}