/* ==========================================================
   Looking Glass - Phase 5A
   ========================================================== */

.bgp-phase5 {
    margin: 14px 0;
    padding: 14px;

    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 8px;

    overflow-x: auto;
}

.bgp-phase5-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;
}

.bgp-phase5-heading h3 {
    margin: 0;
}

.bgp-phase5-clear {
    flex: 0 0 auto;

    padding: 5px 9px;

    font-size: 12px;
}

.bgp-phase5-baseline {
    margin: 10px 0;

    font-size: 12px;
    line-height: 1.4;

    opacity: 0.85;
}

.bgp-phase5-stats {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 8px;

    margin: 12px 0;
}

.bgp-phase5-stat {
    min-width: 0;

    padding: 8px 10px;

    border: 1px solid rgba(127, 127, 127, 0.28);
    border-radius: 6px;
}

.bgp-phase5-stat-label {
    display: block;

    margin-bottom: 3px;

    font-size: 11px;

    opacity: 0.72;
}

.bgp-phase5-stat-value {
    font-size: 18px;
}

.bgp-phase5-events {
    overflow-x: auto;
}

.bgp-phase5-empty {
    padding: 12px 4px;

    font-size: 12px;

    opacity: 0.72;
}

.bgp-phase5-table {
    width: 100%;

    font-size: 11px;
}

.bgp-phase5-table th,
.bgp-phase5-table td {
    vertical-align: top;
}

.bgp-phase5-table td:nth-child(1),
.bgp-phase5-table td:nth-child(6),
.bgp-phase5-table td:nth-child(7),
.bgp-phase5-table td:nth-child(8) {
    white-space: nowrap;
}

.bgp-phase5-information {
    border-left: 3px solid #4d8ac8;
}

.bgp-phase5-attention {
    border-left: 3px solid #d79a2b;
}

.bgp-phase5-attention td:nth-child(2) {
    font-weight: 700;
}

.bgp-phase5-critical {
    border-left: 3px solid #d64b4b;
}

.bgp-phase5-critical td:nth-child(2) {
    font-weight: 700;
}

.bgp-phase5-critical td:nth-child(7) {
    font-weight: 700;
}


@media (max-width: 900px) {

    .bgp-phase5-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 520px) {

    .bgp-phase5-stats {
        grid-template-columns:
            1fr;
    }

    .bgp-phase5-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================
   Phase 5C-1 - Persistance / historique
   ========================================================== */

.bgp-phase5-persistence {
    margin: 4px 0 10px 0;

    font-size: 11px;
    line-height: 1.35;

    opacity: 0.75;
}

.bgp-phase5-history {
    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid rgba(127, 127, 127, 0.30);
}

.bgp-phase5-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
}

.bgp-phase5-history-heading h4 {
    margin: 0;
}

.bgp-phase5-history-controls {
    display: flex;
    align-items: center;

    gap: 6px;

    flex-wrap: wrap;
}

.bgp-phase5-history-controls select,
.bgp-phase5-history-controls button {
    padding: 4px 7px;

    font-size: 11px;
}

.bgp-phase5-history-summary {
    margin: 7px 0 10px;

    font-size: 11px;

    opacity: 0.78;
}

.bgp-phase5-history-events {
    overflow-x: auto;
}

.bgp-phase5-history-table {
    width: 100%;

    font-size: 11px;
}

.bgp-phase5-history-table th,
.bgp-phase5-history-table td {
    vertical-align: top;
}

.bgp-phase5-history-table td:nth-child(1),
.bgp-phase5-history-table td:nth-child(6),
.bgp-phase5-history-table td:nth-child(7),
.bgp-phase5-history-table td:nth-child(8),
.bgp-phase5-history-table td:nth-child(9) {
    white-space: nowrap;
}

@media (max-width: 720px) {

    .bgp-phase5-history-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* BEGIN LG PHASE5C2A ANALYTICS */

.bgp-phase5-history-search {
    min-width: 190px;
}

.bgp-phase5-analytics {
    margin: 14px 0;
    padding: 12px 0;

    border-top: 1px solid rgba(127, 127, 127, 0.25);
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.bgp-phase5-analytics h5 {
    margin: 0 0 7px 0;
}

.bgp-phase5-analytics h6 {
    margin: 0 0 6px 0;

    font-size: 11px;
}

.bgp-phase5-analytics-note {
    margin-bottom: 10px;

    font-size: 11px;
    line-height: 1.4;

    opacity: 0.75;
}

.bgp-phase5-analytics-cards {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 7px;

    margin-bottom: 12px;
}

.bgp-phase5-analytics-card {
    padding: 7px 9px;

    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 6px;
}

.bgp-phase5-analytics-groups {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin: 10px 0 14px;
}

.bgp-phase5-analytics-group {
    min-width: 0;
}

.bgp-phase5-mini-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 11px;
}

.bgp-phase5-mini-table td {
    padding: 3px 4px;

    border-bottom: 1px solid rgba(127, 127, 127, 0.15);
}

.bgp-phase5-mini-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.bgp-phase5-number {
    font-variant-numeric: tabular-nums;
}

.bgp-phase5-analytics-timeline {
    overflow-x: auto;
}

.bgp-phase5-trend-table {
    width: 100%;

    font-size: 11px;
}

.bgp-phase5-trend-table th:not(:first-child),
.bgp-phase5-trend-table td:not(:first-child) {
    text-align: right;
}

@media (max-width: 1000px) {

    .bgp-phase5-analytics-cards {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .bgp-phase5-analytics-groups {
        grid-template-columns:
            1fr;
    }
}

@media (max-width: 600px) {

    .bgp-phase5-analytics-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .bgp-phase5-history-search {
        width: 100%;
    }
}

/* END LG PHASE5C2A ANALYTICS */

/* BEGIN LG PHASE5C2B DRILLDOWN */

.bgp-phase5-drilldown {
    margin: 16px 0;
    padding: 14px 0;

    border-top: 1px solid rgba(127, 127, 127, 0.30);
    border-bottom: 1px solid rgba(127, 127, 127, 0.30);
}

.bgp-phase5-drilldown h5 {
    margin: 0 0 8px 0;
}

.bgp-phase5-drilldown h6 {
    margin: 14px 0 7px 0;

    font-size: 11px;
}

.bgp-phase5-advanced-cards {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 8px;

    margin: 10px 0 14px;
}

.bgp-phase5-rpki-cards {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}

.bgp-phase5-advanced-card {
    padding: 8px 10px;

    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 6px;
}

.bgp-phase5-drill-value {
    padding: 0;

    border: 0;
    background: transparent;

    color: inherit;

    font: inherit;
    font-weight: 600;

    cursor: pointer;

    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.bgp-phase5-clickable,
.bgp-phase5-analytics-group
.bgp-phase5-mini-table td:first-child {
    cursor: pointer;
}

.bgp-phase5-instability,
.bgp-phase5-advanced-trend,
.bgp-phase5-lifecycle,
.bgp-phase5-correlation,
.bgp-phase5-advanced-rpki {
    margin-top: 14px;

    overflow-x: auto;
}

.bgp-phase5-instability-table,
.bgp-phase5-lifecycle-table,
.bgp-phase5-correlation-table {
    width: 100%;

    font-size: 11px;
}

.bgp-phase5-instability-table
td:not(:first-child),
.bgp-phase5-instability-table
th:not(:first-child) {
    text-align: right;
}

.bgp-phase5-state-active {
    font-weight: 700;
}

.bgp-phase5-state-resolved {
    opacity: 0.72;
}

.bgp-phase5-trend-bars {
    display: grid;

    gap: 4px;
}

.bgp-phase5-trend-row {
    display: grid;

    grid-template-columns:
        minmax(120px, 170px)
        minmax(120px, 1fr)
        minmax(190px, auto);

    align-items: center;

    gap: 8px;

    font-size: 11px;
}

.bgp-phase5-trend-label,
.bgp-phase5-trend-values {
    white-space: nowrap;
}

.bgp-phase5-trend-values {
    text-align: right;

    font-variant-numeric:
        tabular-nums;
}

.bgp-phase5-trend-track {
    position: relative;

    height: 10px;

    overflow: hidden;

    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 3px;
}

.bgp-phase5-trend-fill {
    height: 100%;

    background: currentColor;

    opacity: 0.30;
}

@media (max-width: 800px) {

    .bgp-phase5-advanced-cards,
    .bgp-phase5-rpki-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .bgp-phase5-trend-row {
        grid-template-columns:
            110px
            minmax(100px, 1fr);
    }

    .bgp-phase5-trend-values {
        grid-column:
            1 / -1;

        text-align: left;
    }
}

@media (max-width: 480px) {

    .bgp-phase5-advanced-cards,
    .bgp-phase5-rpki-cards {
        grid-template-columns: 1fr;
    }
}

/* END LG PHASE5C2B DRILLDOWN */