/* Network map ------------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.network-page {
    width: 100%;
    min-width: 0;
    max-width: 1480px;
    margin: 0 auto;
}

.network-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.network-heading h1 {
    margin: 3px 0 0;
    font-size: 28px;
    letter-spacing: 0;
}

.scan-stamp {
    display: grid;
    justify-items: end;
    gap: 3px;
    color: var(--text-muted, #676174);
    font-size: 12px;
}

.scan-stamp strong {
    color: var(--text-primary, #272330);
    font-size: 13px;
}

.network-scope-bar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
    gap: 16px;
    padding: 16px;
    border: 1px solid #e2ddea;
    background: #faf9fc;
    border-radius: 8px;
}

.network-scope-bar label {
    display: grid;
    gap: 6px;
    color: #625c6e;
    font-size: 12px;
    font-weight: 700;
}

.network-scope-bar select,
.network-toolbar input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    border: 1px solid #d9d2e3;
    border-radius: 6px;
    background: #fff;
    color: #272330;
    padding: 9px 12px;
    font: inherit;
}

.network-scope-bar select:focus,
.network-toolbar input:focus {
    border-color: #5b21d2;
    outline: 2px solid rgba(91, 33, 210, .14);
    outline-offset: 1px;
}

.network-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    border-block: 1px solid #e5e0e9;
    margin-top: 20px;
}

.network-metrics > div {
    min-width: 0;
    display: grid;
    gap: 4px;
    padding: 18px 20px;
    border-right: 1px solid #e5e0e9;
}

.network-metrics > div:last-child {
    border-right: 0;
}

.network-metrics strong {
    color: #4f17bd;
    font-size: 26px;
}

.network-metrics span {
    color: #696273;
    font-size: 12px;
}

.network-confidence {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 11px 0;
    color: #625c6e;
    font-size: 12px;
}

.network-confidence b {
    color: #272330;
    margin-right: 5px;
}

.network-workspace {
    border-top: 1px solid #e1dbe7;
    margin-top: 6px;
}

.network-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid #ded8e5;
}

.network-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 15px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #625c6e;
    font-weight: 700;
    cursor: pointer;
}

.network-tab img {
    width: 18px;
    height: 18px;
}

.network-tab:hover,
.network-tab.active {
    color: #4f17bd;
    background: #f8f5fd;
}

.network-tab.active {
    border-bottom-color: #5b21d2;
}

.network-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
}

.network-search {
    width: min(440px, 100%);
}

.network-result-count {
    color: #6f6879;
    font-size: 12px;
    white-space: nowrap;
}

.network-panel {
    min-height: 240px;
}

.network-topology {
    display: grid;
    border-top: 1px solid #e4dfe8;
}

.network-topology-group {
    border-bottom: 1px solid #e4dfe8;
}

.network-topology-group.is-default-network {
    border-left: 3px solid #e8a008;
}

.network-topology-group.is-default-network > .network-topology-header {
    background: #fffbf1;
}

.network-topology-group.is-default-network > .network-topology-header:hover {
    background: #fff6dc;
}

.network-topology-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 70px;
    padding: 12px 10px;
    border: 0;
    background: #fff;
    color: #272330;
    text-align: left;
    cursor: pointer;
}

.network-topology-header:hover {
    background: #faf9fc;
}

.network-topology-header::before {
    content: "›";
    color: #635c6d;
    font-size: 22px;
    transition: transform .16s ease;
}

.network-topology-header[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.network-topology-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.network-topology-identity img {
    width: 27px;
    height: 27px;
}

.network-topology-identity > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.network-topology-identity strong,
.network-topology-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-topology-identity small {
    color: #756e7e;
}

.network-topology-header-summary {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.network-topology-body {
    padding: 0 16px 18px 54px;
    border-left: 2px solid #7c3aed;
    margin-left: 23px;
}

.network-topology-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid #efcf82;
    background: #fffbef;
    color: #624200;
}

.network-topology-warning img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.network-topology-warning > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.network-topology-warning strong {
    font-size: 12px;
}

.network-topology-warning small {
    color: #795f22;
    font-size: 11px;
}

.network-topology-lane {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #eeeaf1;
}

.network-topology-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.network-topology-item {
    padding: 5px 8px;
    border: 1px solid #ddd7e3;
    border-radius: 4px;
    background: #fff;
    color: #4b4554;
    font-size: 12px;
}

.network-shared-vpc-content {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.network-host-project {
    display: grid;
    grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: #4f4858;
    font-size: 12px;
}

.network-host-project > span {
    color: #766f7f;
    font-weight: 700;
}

.network-host-project > small {
    min-width: 0;
    overflow: hidden;
    color: #766f7f;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-service-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    border-top: 1px solid #e5e0e9;
    border-left: 1px solid #e5e0e9;
}

.network-service-project {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border-right: 1px solid #e5e0e9;
    border-bottom: 1px solid #e5e0e9;
    background: #fcfbfd;
}

.network-service-project strong,
.network-service-project small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-service-project strong {
    color: #322b3b;
    font-size: 12px;
}

.network-service-project small {
    color: #766f7f;
    font-size: 11px;
}

.network-subnet-list {
    min-width: 0;
    border-top: 1px solid #e5e0e9;
}

.network-subnet-row {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(260px, 1.3fr);
    gap: 16px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid #e5e0e9;
}

.network-subnet-head {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.network-subnet-head img {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.network-subnet-head > span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.network-subnet-head strong,
.network-subnet-head small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-subnet-head strong {
    color: #322b3b;
    font-size: 12px;
}

.network-subnet-head small {
    color: #766f7f;
    font-size: 11px;
}

.network-subnet-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.network-subnet-range {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 2px 8px;
    min-height: 42px;
    padding: 6px 8px;
    border: 1px solid #dcd6e2;
    border-radius: 6px;
    background: #fff;
}

.network-subnet-range code {
    color: #28222f;
    font-size: 11px;
    font-weight: 700;
}

.network-subnet-range > small {
    grid-column: 1;
    color: #766f7f;
    font-size: 10px;
}

.network-subnet-range > .network-badge {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.network-inline-note {
    color: #766f7f;
    font-size: 12px;
}

.network-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1eff3;
    color: #544e5d;
    font-size: 11px;
    font-weight: 800;
    text-transform: capitalize;
    white-space: nowrap;
}

.network-badge.purple { background: #eee7ff; color: #5719c7; }
.network-badge.success { background: #e3f5e9; color: #137238; }
.network-badge.warning,
.network-badge.medium { background: #fff0cf; color: #8e5700; }
.network-badge.danger,
.network-badge.critical { background: #fde5e3; color: #aa2119; }
.network-badge.high { background: #ffeadc; color: #9b3d0d; }
.network-badge.low { background: #e6f0fb; color: #245f99; }
.network-badge.info { background: #eeedf1; color: #595361; }

.network-range-availability {
    border: 1px solid #e1dce6;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.network-toolbar[hidden] {
    display: none;
}

.network-availability-empty {
    margin: 0;
    padding: 18px;
    color: #665f70;
    font-size: 13px;
}

.network-availability-empty.warning {
    background: #fffbef;
    color: #795400;
}

.network-availability-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid #e7e2eb;
}

.network-availability-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.network-availability-identity img {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.network-availability-identity > span {
    min-width: 0;
}

.network-availability-identity h2,
.network-availability-identity p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-availability-identity h2 {
    margin: 0;
    color: #2d2735;
    font-size: 15px;
}

.network-availability-identity p {
    margin: 2px 0 0;
    color: #746d7d;
    font-size: 11px;
}

.network-availability-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid #e7e2eb;
}

.network-availability-metrics > span {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    border-right: 1px solid #e7e2eb;
}

.network-availability-metrics > span:last-child {
    border-right: 0;
}

.network-availability-metrics strong {
    overflow: hidden;
    color: #332b3c;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.network-availability-metrics small {
    color: #746d7d;
    font-size: 10px;
}

.network-range-planner {
    padding: 14px 16px 16px;
}

.network-range-planner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.network-range-planner h3 {
    margin: 0;
    color: #342d3d;
    font-size: 13px;
}

.network-range-planner-head p {
    margin: 3px 0 0;
    color: #746d7d;
    font-size: 11px;
}

.network-available-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.network-available-ranges code {
    padding: 7px 9px;
    border: 1px solid #cfc7d7;
    border-radius: 4px;
    background: #faf9fb;
    color: #302938;
    font-size: 11px;
    font-weight: 700;
}

.network-availability-note {
    margin: 12px 0 0;
    color: #6d6576;
    font-size: 10px;
    line-height: 1.45;
}

.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #e1dce6;
    border-radius: 6px;
}

.network-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

.network-table th {
    padding: 10px 12px;
    background: #f5f2f8;
    color: #5a5364;
    font-size: 11px;
    text-align: left;
    text-transform: uppercase;
}

.network-table td {
    padding: 10px 12px;
    border-top: 1px solid #e6e1e9;
    color: #312c38;
    font-size: 12px;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.network-table tbody tr:hover {
    background: #faf9fc;
}

.network-firewall-table {
    min-width: 1565px;
}

/* Route ownership needs stable columns because route names and next hops vary
   widely in length. The scroll wrapper preserves this layout on small screens. */
.network-routes-table {
    min-width: 1250px;
}

.network-routes-table th:nth-child(1) { width: 185px; }
.network-routes-table th:nth-child(2) { width: 150px; }
.network-routes-table th:nth-child(3) { width: 175px; }
.network-routes-table th:nth-child(4) { width: 125px; }
.network-routes-table th:nth-child(5) { width: 85px; }
.network-routes-table th:nth-child(6) { width: 225px; }
.network-routes-table th:nth-child(7) { width: 85px; }
.network-routes-table th:nth-child(8) { width: 95px; }

/* Keep ownership, subnet and utilization comparable without squeezing CIDRs. */
.network-ranges-table {
    min-width: 1160px;
}

.network-ranges-table th:nth-child(1) { width: 130px; }
.network-ranges-table th:nth-child(2) { width: 160px; }
.network-ranges-table th:nth-child(3) { width: 180px; }
.network-ranges-table th:nth-child(4) { width: 105px; }
.network-ranges-table th:nth-child(5) { width: 170px; }
.network-ranges-table th:nth-child(6) { width: 140px; }
.network-ranges-table th:nth-child(7) { width: 130px; }

.network-firewall-table th:nth-child(1) { width: 205px; }
.network-firewall-table th:nth-child(2) { width: 150px; }
.network-firewall-table th:nth-child(3) { width: 175px; }
.network-firewall-table th:nth-child(4) { width: 150px; }
.network-firewall-table th:nth-child(5) { width: 90px; }
.network-firewall-table th:nth-child(6) { width: 85px; }
.network-firewall-table th:nth-child(7) { width: 115px; }
.network-firewall-table th:nth-child(8) { width: 315px; }
.network-firewall-table th:nth-child(9) { width: 175px; }

.network-firewall-table .network-badge {
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.network-cell-stack,
.network-firewall-selectors,
.network-firewall-selectors > span {
    display: grid;
    gap: 3px;
}

.network-cell-stack strong {
    color: #2d2735;
    font-size: 12px;
}

.network-cell-stack small,
.network-firewall-selectors small {
    color: #756e7e;
    font-size: 10px;
}

.network-firewall-selectors {
    gap: 8px;
}

.network-firewall-selectors > span > span {
    color: #312c38;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    line-height: 1.45;
}

.network-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px !important;
}

.network-analysis-list {
    border-top: 1px solid #e4dfe8;
}

.network-analysis-row {
    display: grid;
    grid-template-columns: 85px minmax(0, 1fr);
    gap: 18px;
    padding: 16px 8px;
    border-bottom: 1px solid #e4dfe8;
}

.network-analysis-row h3 {
    margin: 0 0 6px;
    font-size: 15px;
}

.network-analysis-row p {
    margin: 0 0 6px;
    color: #56505e;
    line-height: 1.45;
}

.network-analysis-row .network-recommendation {
    color: #272330;
    font-weight: 650;
}

.network-analysis-row small {
    color: #756e7e;
    text-transform: capitalize;
}

.network-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0;
    color: #615a6c;
    font-size: 12px;
}

.network-pagination[hidden] {
    display: none;
}

.network-pagination .icon-button {
    width: 34px;
    height: 34px;
    border: 1px solid #d9d2e3;
    border-radius: 5px;
    background: #fff;
    color: #4f17bd;
    font-size: 22px;
    cursor: pointer;
}

.network-pagination .icon-button:disabled {
    color: #aaa4b1;
    cursor: default;
}

.network-inline-empty,
.network-table-empty,
.network-empty {
    padding: 28px 16px !important;
    color: #746d7d !important;
    text-align: center;
}

@media (max-width: 900px) {
    .network-metrics { grid-template-columns: repeat(3, 1fr); }
    .network-metrics > div:nth-child(3) { border-right: 0; }
    .network-metrics > div:nth-child(n+4) { border-top: 1px solid #e5e0e9; }
    .network-availability-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .network-availability-metrics > span:nth-child(2) { border-right: 0; }
    .network-availability-metrics > span:nth-child(n+3) { border-top: 1px solid #e7e2eb; }
}

@media (max-width: 680px) {
    .network-heading { display: grid; }
    .scan-stamp { justify-items: start; }
    .network-scope-bar { grid-template-columns: 1fr; }
    .network-metrics { grid-template-columns: repeat(2, 1fr); }
    .network-metrics > div:nth-child(odd) { border-right: 1px solid #e5e0e9; }
    .network-metrics > div:nth-child(even) { border-right: 0; }
    .network-metrics > div:nth-child(n+3) { border-top: 1px solid #e5e0e9; }
    .network-toolbar { align-items: flex-start; flex-direction: column; }
    .network-topology-header { align-items: center; flex-wrap: wrap; }
    .network-topology-identity { flex: 1 1 calc(100% - 42px); }
    .network-topology-header-summary {
        width: calc(100% - 39px);
        justify-content: flex-start;
        margin-left: 39px;
    }
    .network-topology-header .network-badge { white-space: normal; }
    .network-topology-body { padding-left: 24px; margin-left: 10px; }
    .network-topology-lane { grid-template-columns: 1fr; gap: 8px; }
    .network-host-project { grid-template-columns: 1fr; gap: 2px; }
    .network-service-projects { grid-template-columns: 1fr; }
    .network-subnet-row { grid-template-columns: 1fr; gap: 8px; }
    .network-subnet-ranges { display: grid; }
    .network-subnet-range { width: 100%; }
    .network-availability-header { align-items: flex-start; flex-wrap: wrap; }
    .network-availability-identity { flex: 1 1 100%; }
    .network-range-planner-head { align-items: flex-start; flex-direction: column; }
    .network-analysis-row { grid-template-columns: 1fr; gap: 8px; }
}