/* ============================================================
   连接信息模块样式 —— Steam Console
   注意：本文件在 style.css 之后加载，同等优先级下会覆盖外壳
   的同名规则，因此颜色必须与外壳面板一致。
   ============================================================ */

/* 子菜单 —— 下划线式标签 */
.section-subtabs,
.conn-subtabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--ws-line, #313843);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.section-subtab,
.conn-subtab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    color: var(--ws-mute, #8b94a3);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    border-radius: 0;
}
.section-subtab:hover,
.conn-subtab:hover {
    color: var(--ws-ink-strong, #f5f2e8);
}
.section-subtab.active,
.conn-subtab.active {
    color: var(--ws-accent, #0a7cc4);
    border-bottom-color: var(--ws-accent, #0a7cc4);
    font-weight: 600;
}
.subpanel,
.conn-subpanel { display: none; }
.subpanel.active,
.conn-subpanel.active { display: block; }

/* 连接详情行（弹窗内） */
.conn-detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--ws-line-soft, #262c35);
    flex-wrap: wrap;
}

.conn-detail-label {
    min-width: 80px;
    color: var(--ws-mute, #8b94a3);
    font-weight: 500;
    font-family: var(--ws-font-mono, 'JetBrains Mono', Consolas, monospace);
    font-size: 0.82rem;
}

.conn-copy-btn {
    margin-left: 0.5rem;
    min-height: 40px;
    min-width: 40px;
    padding: 0 0.75rem;
}

/* 编辑弹窗：输入框与复制按钮同行 */
.conn-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.conn-input-row .form-input {
    flex: 1;
    min-width: 0;
}
.conn-config-copy-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 0.85rem;
}

/* 管理员状态列：可点击查看已授权用户 */
.conn-status-link {
    color: var(--ws-accent, #0a7cc4);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}
.conn-status-link:hover {
    color: #3fb8f5;
}

/* 审批区小标题 */
#conn-approval-panel .records-section h3 {
    color: var(--ws-ink-strong, #f5f2e8);
    font-family: var(--ws-font-display, 'Space Grotesk', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}

/* 连接信息列表移动端：跟随全局 .data-table 在 .table-container 内横向滚动；
   卡片视图由 .lv-card-view 提供。此处不再把表格强制改成卡片，否则即使
   data-mode="list"，移动端仍会显示成卡片，导致列表/卡片切换失效。 */
@media (max-width: 768px) {
    /* 详情弹窗移动端近全屏 */
    #connection-detail-modal .modal,
    #connection-config-modal .modal,
    #connection-approve-modal .modal,
    #connection-grant-modal .modal {
        width: 95vw;
        max-width: 95vw;
        max-height: 92vh;
        overflow-y: auto;
    }
    .conn-copy-btn,
    .conn-config-copy-btn {
        min-height: 44px;
        min-width: 44px;
    }
    /* 审批弹窗有效期行内控件堆叠 */
    #connection-approve-modal .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        align-items: flex-start;
    }
}