/* 自建网关 · 运行监控。页面根同时带 .sm-page，沿用系统监控的配色变量与组件；本文件只定义 sgm- 前缀的新增部分。 */
.sgm-page {
    --sgm-backdrop: rgba(15, 23, 42, 0.42);
}

.theme-dark .sgm-page {
    --sgm-backdrop: rgba(2, 6, 23, 0.6);
}

.sgm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sgm-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.sgm-page .sm-port.sm-tone-unknown {
    color: var(--sm-unknown);
    background: var(--sm-unknown-bg);
}

.sgm-page .sm-alert {
    margin: 0 0 12px;
}

/* ------------------------------------------------------------ status row */
.sgm-status-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.1fr) repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.sgm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 12px 14px;
    border-left-width: 3px;
    color: var(--sm-text);
    font: inherit;
    text-align: left;
}

.sgm-card.sgm-tone-ok,
.sgm-card.sgm-tone-info { border-left-color: var(--sm-fill-ok); }
.sgm-card.sgm-tone-warn { border-left-color: var(--sm-fill-warn); }
.sgm-card.sgm-tone-crit { border-left-color: var(--sm-fill-crit); }
.sgm-card.sgm-tone-unknown { border-left-color: var(--sm-unknown); }

.sgm-card-action {
    padding-right: 30px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sgm-card-action:hover {
    border-top-color: var(--sm-accent);
    border-right-color: var(--sm-accent);
    border-bottom-color: var(--sm-accent);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.sgm-card-action:focus-visible {
    outline: 2px solid var(--sm-accent);
    outline-offset: 2px;
}

.sgm-card-chevron {
    position: absolute;
    top: 14px;
    right: 12px;
    color: var(--sm-muted);
    font-size: 11px;
}

.sgm-card-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--sm-muted);
    font-size: 12px;
}

.sgm-card-value {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.sgm-card-value small {
    color: var(--sm-muted);
    font-size: 12px;
    font-weight: 400;
}

.sgm-card-sub {
    color: var(--sm-text-2);
    font-size: 12px;
    line-height: 1.45;
}

.sgm-card-overall {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.sgm-overall-icon {
    font-size: 26px;
    line-height: 1;
}

.sgm-overall-icon.sm-text-info {
    color: var(--sm-ok);
}

.sgm-overall-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sgm-issues {
    margin: 0 0 14px;
}

.sgm-info-only {
    border-top: 0;
}

/* --------------------------------------------------------- gateway table */
.sgm-gateways {
    margin-top: 0;
}

.sgm-section-tools {
    align-items: center;
}

.sgm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sgm-chip-btn {
    padding: 4px 11px;
    border: 1px solid var(--sm-border-strong);
    border-radius: 999px;
    background: var(--sm-surface);
    color: var(--sm-text-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.sgm-chip-btn.is-active {
    border-color: var(--sm-accent);
    background: var(--sm-info-bg);
    color: var(--sm-accent);
    font-weight: 600;
}

.sgm-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 6px;
}

.sgm-search i {
    position: absolute;
    left: 10px;
    color: var(--sm-muted);
    font-size: 12px;
    pointer-events: none;
}

.sgm-search input {
    width: 200px;
    padding: 5px 10px 5px 29px;
    border: 1px solid var(--sm-border-strong);
    border-radius: 6px;
    background: var(--sm-surface);
    color: var(--sm-text);
    font: inherit;
    font-size: 12.5px;
}

.sgm-search input:focus {
    outline: 2px solid var(--sm-accent);
    outline-offset: 0;
    border-color: transparent;
}

.sgm-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sgm-name-line .sm-badge {
    padding: 0 6px;
    font-size: 11px;
    line-height: 17px;
}

.sgm-gw-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sm-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sgm-gw-name:hover span {
    color: var(--sm-accent);
    text-decoration: underline;
}

.sgm-gw-name:focus-visible,
.sgm-chip-btn:focus-visible,
.sgm-icon-btn:focus-visible {
    outline: 2px solid var(--sm-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.sgm-cell-online b {
    font-size: 14px;
}

.sgm-meters {
    display: grid;
    gap: 3px;
    min-width: 168px;
}

.sgm-meter {
    display: grid;
    grid-template-columns: 30px minmax(70px, 1fr) 36px;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    line-height: 15px;
}

.sgm-bw .sgm-meter {
    grid-template-columns: minmax(90px, 1fr) 36px;
}

.sgm-meter .sm-bar {
    height: 6px;
    min-width: 0;
}

.sgm-meter .sm-bar-mark {
    top: -2px;
    bottom: -2px;
}

.sgm-meter-label {
    color: var(--sm-muted);
}

.sgm-meter-value {
    text-align: right;
    font-weight: 600;
}

.sgm-bw {
    display: grid;
    gap: 3px;
    min-width: 150px;
}

.sgm-bw .sm-sub {
    font-size: 11.5px;
    white-space: nowrap;
}

.sgm-cell-routers {
    min-width: 0 !important;
}

.sgm-cell-routers .sm-port {
    display: flex;
    width: max-content;
}

.sgm-actions {
    text-align: right;
}

.sgm-icon-btn {
    padding: 5px 8px;
    gap: 6px;
}

.sgm-actions .sgm-icon-btn + .sgm-icon-btn {
    margin-left: 4px;
}

.sgm-empty-row {
    padding: 18px !important;
    text-align: center !important;
}

/* ----------------------------------------------------------------- modal */
body.sgm-modal-open {
    overflow: hidden;
}

.sgm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--sgm-backdrop);
}

.sgm-modal {
    position: fixed;
    top: 4vh;
    left: 50%;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    width: min(1180px, calc(100vw - 32px));
    max-height: 92vh;
    transform: translateX(-50%);
    background: var(--sm-bg);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}

.sgm-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--sm-border);
    background: var(--sm-surface);
}

.sgm-modal-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sgm-modal-title h2 {
    font-size: 17px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sgm-modal-title .sm-dot {
    width: 10px;
    height: 10px;
}

.sgm-modal-meta {
    grid-column: 1 / 2;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
    color: var(--sm-muted);
    font-size: 12px;
}

.sgm-modal-actions {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sgm-close {
    margin-left: 6px;
}

.sgm-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sgm-modal-body .sm-section-head {
    margin-bottom: 8px;
}

.sgm-modal-body .sm-section-head h3 {
    font-size: 14px;
    font-weight: 600;
}

.sgm-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--sm-border);
    background: var(--sm-surface);
}

.sgm-page .sgm-btn-primary {
    border-color: var(--sm-accent);
    background: var(--sm-accent);
    color: #fff;
}

.sgm-page .sgm-btn-primary:hover:not(:disabled) {
    color: #fff;
    filter: brightness(1.08);
}

/* Dark mode accent is light blue: use dark text for contrast (about 8.5:1). */
.theme-dark .sgm-page .sgm-btn-primary,
.theme-dark .sgm-page .sgm-btn-primary:hover:not(:disabled) {
    color: #0b1220;
}

/* The gateway form comes from the SelfGateway page; its styles need the .sg-page variables
   but not that page's padding and background. */
.sgm-page .sgm-sg-form.sg-page {
    min-height: 0;
    padding: 16px;
    background: var(--sm-surface);
}

.sgm-edit-error[hidden] {
    display: none;
}

.sgm-modal-reasons {
    margin: 0;
}

.sgm-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 12px;
    align-items: start;
}

.sgm-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    min-width: 0;
}

.sgm-panel p {
    margin: 0;
}

.sgm-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}

.sgm-panel-head h3 {
    font-size: 14px;
    font-weight: 600;
}

.sgm-panel-head .sm-muted {
    font-size: 12px;
}

.sgm-kv li {
    align-items: baseline;
}

.sgm-kv span {
    flex: none;
    white-space: nowrap;
}

.sgm-kv b {
    min-width: 0;
}

.sgm-error {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--sm-crit-bg);
    color: var(--sm-crit);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* An error that a later allocator cycle already recovered from: kept for reference, not alarming. */
.sgm-error-history {
    padding-bottom: 0;
}

.sgm-error-history .sgm-error-past {
    margin-top: 8px;
    background: var(--sm-unknown-bg);
    color: var(--sm-text);
}

.sgm-note {
    margin: 0;
    color: var(--sm-text-2);
    font-size: 12.5px;
}

.sgm-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
}

.sgm-facts > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 12px;
    border-left: 1px solid var(--sm-border);
}

.sgm-facts > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.sgm-facts > div > span {
    color: var(--sm-muted);
    font-size: 12px;
}

.sgm-facts b {
    font-size: 17px;
    font-weight: 600;
}

.sgm-facts small {
    color: var(--sm-muted);
    font-size: 11.5px;
    font-weight: 400;
}

.sgm-routers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sgm-router {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    min-width: 0;
}

.sgm-router p {
    margin: 0;
    font-size: 12px;
}

.sgm-router-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sgm-router-head .sm-badge {
    margin-left: auto;
}

.sgm-units {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin-top: 10px !important;
    font-size: 12px;
}

.sgm-units li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sgm-unit-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sgm-stats {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 12px 6px;
}

.sgm-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 14px;
    border-left: 1px solid var(--sm-border);
}

.sgm-stat:first-child {
    border-left: 0;
}

.sgm-stat > span {
    color: var(--sm-muted);
    font-size: 12px;
}

.sgm-stat > b {
    font-size: 18px;
    font-weight: 600;
}

.sgm-stat > b small {
    color: var(--sm-muted);
    font-size: 12px;
    font-weight: 400;
}

.sgm-stat > small {
    color: var(--sm-muted);
    font-size: 11.5px;
}

/* ------------------------------------------------- location groups / countries */
.sgm-page .sgm-group-row > th {
    padding: 9px 12px 7px;
    background: var(--sm-surface-2);
    border-top: 1px solid var(--sm-border-strong);
    text-align: left;
    font-weight: 400;
}

.sgm-page .sgm-group-row:first-child > th {
    border-top: 0;
}

.sgm-group-title {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-right: 12px;
    color: var(--sm-text);
    font-size: 13.5px;
    font-weight: 600;
}

.sgm-group-title .fa-location-dot {
    color: var(--sm-accent);
    font-size: 12px;
}

.sgm-group-title .sm-muted {
    font-size: 11.5px;
    font-weight: 500;
}

.sgm-group-meta {
    color: var(--sm-muted);
    font-size: 12px;
}

.sgm-countries .sgm-table-countries {
    width: 100%;
}

.sgm-table-countries th,
.sgm-table-countries td {
    padding: 5px 10px;
    font-size: 12.5px;
}

.sgm-table-countries thead th:nth-child(2),
.sgm-table-countries td.sm-num {
    width: 96px;
    text-align: right;
}

.sgm-table-countries thead th:nth-child(3) {
    width: 42%;
}

.sgm-country-share {
    display: grid;
    grid-template-columns: minmax(60px, 1fr) 52px;
    align-items: center;
    gap: 8px;
}

.sgm-country-share .sm-bar {
    height: 6px;
    min-width: 0;
}

.sgm-country-share > span:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sgm-countries-more > summary {
    padding: 4px 0;
    color: var(--sm-accent);
    font-size: 12.5px;
    cursor: pointer;
}

.sgm-countries-more > summary:focus-visible {
    outline: 2px solid var(--sm-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ------------------------------------------------------------ responsive */
@media (prefers-reduced-motion: reduce) {
    .sgm-card-action { transition: none; }
}

/* Laptop widths: keep the gateway table, including its actions, inside the viewport. */
@media (max-width: 1400px) {
    .sgm-table-gateways th,
    .sgm-table-gateways td {
        padding-left: 7px;
        padding-right: 7px;
    }

    .sgm-meters {
        min-width: 128px;
    }

    .sgm-meter {
        grid-template-columns: 28px minmax(40px, 1fr) 32px;
        gap: 5px;
    }

    .sgm-bw {
        min-width: 118px;
    }

    .sgm-bw .sgm-meter {
        grid-template-columns: minmax(60px, 1fr) 32px;
    }

    .sgm-bw .sm-sub {
        white-space: normal;
    }

    /* The gateway name already opens the detail view. */
    .sgm-actions [data-action="open-gateway"] {
        display: none;
    }
}

@media (max-width: 1280px) {
    .sgm-status-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sgm-modal-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgm-stats {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 12px;
    }

    .sgm-stat:nth-child(4) {
        border-left: 0;
    }
}

@media (max-width: 900px) {
    .sgm-status-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sgm-card-overall {
        grid-column: 1 / -1;
    }

    .sgm-routers {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgm-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 10px;
    }

    .sgm-facts > div:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .sgm-modal {
        top: 0;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }

    .sgm-modal-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .sgm-modal-actions {
        grid-column: 1;
        grid-row: auto;
        flex-wrap: wrap;
    }

    .sgm-search input {
        width: 160px;
    }
}

/* 中心服务器定时任务：域名证书续期合成一组，默认折叠 */
.sgm-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sgm-group-toggle:hover {
    color: var(--sm-accent);
}

.sgm-group-toggle:focus-visible {
    outline: 2px solid var(--sm-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.sgm-group-toggle i {
    width: 12px;
    font-size: 11px;
    color: var(--sm-muted);
}

.sgm-group-row .sm-sub {
    padding-left: 18px;
}

.sgm-group-child > th {
    padding-left: 30px;
}